/* ============================================================
   BASE
============================================================ */

.snto,
.snto *,
.snto *::before,
.snto *::after{
    box-sizing:border-box;
}


.snto{

    --snto-orange:var(--core-primary,#7B1E3A);
    --snto-orange-dark:#DE4704;
    --snto-orange-soft:#FFF3EC;

    --snto-green:#21A35B;

    --snto-black:#111111;
    --snto-text:#515761;
    --snto-muted:#858B94;

    --snto-border:#E8E8E8;
    --snto-soft:#FAFAFA;

    width:100%;

    color:
        var(--snto-black);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


.snto-container{

    width:min(
        calc(100% - 40px),
        var(--core-content-width,1700px)
    );

    margin:0 auto;
}


.snto button,
.snto input{
    font-family:inherit !important;
}


.snto a{
    text-decoration:none !important;
}



/* ============================================================
   HERO
============================================================ */

.snto-hero{

    position:relative;

    overflow:hidden;

    border-bottom:
        1px solid
        #F0F0F0;

    background:
        linear-gradient(
            90deg,
            #FFF8F4 0%,
            #FFFFFF 46%,
            #FBF6F7 100%
        );
}


.snto-hero-inner{

    min-height:245px;

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        235px;

    gap:35px;

    align-items:center;

    padding-top:31px;

    padding-bottom:31px;
}


.snto-hero-main{

    position:relative;

    z-index:3;

    min-width:0;

    text-align:center;
}


.snto-hero-main h1{

    margin:
        0
        0
        6px;

    color:
        var(--snto-black);

    font-size:
        clamp(
            34px,
            3vw,
            47px
        );

    line-height:
        1.15;

    font-weight:700;

    letter-spacing:
        -.035em;
}


.snto-hero-main > p{

    margin:
        0
        0
        22px;

    color:
        #626974;

    font-size:12px;

    line-height:1.55;
}



/* ============================================================
   HERO SHAPES
============================================================ */

.snto-hero-shape{

    position:absolute;

    border-radius:50%;

    background:
        rgba(
            242,
            84,
            11,
            .07
        );
}


.snto-shape-one{

    width:160px;

    height:160px;

    top:-52px;

    left:-68px;
}


.snto-shape-two{

    width:55px;

    height:55px;

    top:34px;

    left:70px;
}



/* ============================================================
   TRACK FORM
============================================================ */

.snto-form{

    width:100%;

    max-width:790px;

    margin:0 auto;

    padding:
        15px
        17px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr)
        218px;

    gap:13px;

    align-items:start;

    border:
        1px solid
        var(--snto-border);

    border-radius:8px;

    background:#FFFFFF;

    box-shadow:
        0
        7px
        24px
        rgba(
            0,
            0,
            0,
            .035
        );

    text-align:left;
}


.snto-form label{

    min-width:0;

    display:block;
}


.snto-form label > span:first-child{

    margin:
        0
        0
        6px;

    display:block;

    color:#292D33;

    font-size:12px;

    line-height:1;

    font-weight:600;
}


.snto-field{

    width:100%;

    height:43px;

    position:relative;

    display:flex !important;

    align-items:center;

    margin:0 !important;

    border:
        1px solid
        #DFE1E4;

    border-radius:5px;

    background:#FFFFFF;
}


.snto-field:focus-within{

    border-color:
        rgba(
            242,
            84,
            11,
            .7
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            242,
            84,
            11,
            .06
        );
}


.snto-field-icon{

    width:39px;

    min-width:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8B929C;
}


.snto-field-icon svg{

    width:18px;

    height:18px;
}


.snto
.snto-field
input{

    width:100% !important;

    height:41px !important;

    min-height:41px !important;

    margin:0 !important;

    padding:
        0
        10px
        0
        0 !important;

    border:0 !important;

    outline:0 !important;

    background:
        transparent !important;

    color:#25292F !important;

    font-size:12px !important;

    box-shadow:none !important;
}


.snto
.snto-field
input::placeholder{

    color:#9EA3AA;
}


.snto-form label small{

    margin-top:6px;

    display:block;

    color:#93989F;

    font-size:12px;

    line-height:1.45;
}



/* ============================================================
   TRACK BUTTON
============================================================ */

.snto-track-btn,
.snto-track-btn:hover,
.snto-track-btn:focus{

    width:100% !important;

    height:43px !important;

    min-height:43px !important;

    margin:
        15px
        0
        0 !important;

    padding:
        8px
        15px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:7px !important;

    border:0 !important;

    border-radius:5px !important;

    background:
        var(--snto-orange) !important;

    color:#FFFFFF !important;

    font-size:13px !important;

    font-weight:600 !important;

    box-shadow:
        none !important;

    outline:none !important;

    cursor:pointer !important;

    transition:
        background .18s ease,
        transform .18s ease;
}


.snto-track-btn:hover{

    background:
        var(--snto-orange-dark) !important;

    transform:
        translateY(-1px);
}


.snto-track-btn svg{

    width:16px;

    height:16px;
}


.snto-track-btn.is-loading{

    opacity:.6;

    pointer-events:none;
}



/* ============================================================
   FORM MESSAGE
============================================================ */

.snto-form-message{

    max-width:790px;

    margin:
        9px
        auto
        0;

    display:none;

    color:#D92D20;

    font-size:12px;

    text-align:left;
}


.snto-form-message.is-visible{

    display:block;
}



/* ============================================================
   PACKAGE ART
============================================================ */

.snto-package-art{

    position:relative;

    z-index:2;

    align-self:end;

    display:flex;

    align-items:flex-end;

    justify-content:center;
}


.snto-package-art > svg{

    width:205px;

    height:auto;

    display:block;
}


.snto-hand-note{

    position:absolute;

    top:-11px;

    left:-20px;

    color:#333333;

    font-family:
        "Segoe Print",
        "Bradley Hand",
        cursive;

    font-size:18px;

    line-height:1.2;

    transform:
        rotate(-8deg);

    opacity:.86;
}



/* ============================================================
   RESULTS AREA
============================================================ */

.snto-results{

    padding:
        16px
        0
        55px;
}


.snto-results:empty{

    padding:0;
}



/* ============================================================
   RESULT CARD
============================================================ */

.snto-result-card{

    width:100%;

    padding:
        17px;

    border:
        1px solid
        var(--snto-border);

    border-radius:8px;

    background:#FFFFFF;

    box-shadow:
        0
        9px
        30px
        rgba(
            0,
            0,
            0,
            .025
        );
}



/* ============================================================
   RESULT HEADER
============================================================ */

.snto-result-head{

    margin-bottom:19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}


.snto-found{

    display:flex;

    align-items:center;

    gap:10px;
}


.snto-found-icon{

    width:31px;

    height:31px;

    flex:
        0 0
        31px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--snto-green);

    color:#FFFFFF;
}


.snto-found-icon.is-problem{

    background:#D92D20;
}


.snto-found-icon svg{

    width:17px;

    height:17px;
}


.snto-found strong{

    display:block;

    margin-bottom:2px;

    color:
        var(--snto-black);

    font-size:13px;

    line-height:1.25;

    font-weight:700;
}


.snto-found span:not(.snto-found-icon){

    display:block;

    color:
        var(--snto-muted);

    font-size:12px;
}


.snto-last-update{

    display:flex;

    align-items:center;

    gap:15px;

    color:
        #8A9098;

    font-size:12px;
}



/* ============================================================
   REFRESH
============================================================ */

.snto-refresh,
.snto-refresh:hover,
.snto-refresh:focus{

    width:auto !important;

    height:auto !important;

    min-width:0 !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    gap:5px !important;

    border:0 !important;

    background:
        transparent !important;

    color:
        #1685D5 !important;

    font-size:12px !important;

    box-shadow:none !important;

    outline:none !important;

    cursor:pointer !important;
}


.snto-refresh svg{

    width:14px;

    height:14px;
}



/* ============================================================
   TIMELINE
============================================================ */

.snto-timeline{

    margin:
        0
        12px
        25px;

    display:grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );
}


.snto-step{

    position:relative;

    min-width:0;

    text-align:center;

    color:#B1B5BB;
}


.snto-step-line{

    position:absolute;

    z-index:1;

    top:16px;

    right:50%;

    width:100%;

    border-top:
        1px dashed
        #C8CDD3;
}


.snto-step.is-active
.snto-step-line{

    border-top:
        2px solid
        var(--snto-orange);
}


.snto-step-marker{

    position:relative;

    z-index:2;

    width:33px;

    height:33px;

    margin:
        0
        auto
        7px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        #C7CCD2;

    border-radius:50%;

    background:#FFFFFF;

    color:#A0A6AE;

    box-shadow:
        0
        0
        0
        5px
        #FFFFFF;
}


.snto-step-marker svg{

    width:15px;

    height:15px;
}


.snto-step.is-active
.snto-step-marker{

    border-color:
        var(--snto-orange);

    background:
        var(--snto-orange);

    color:#FFFFFF;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            242,
            84,
            11,
            .08
        );
}


.snto-step strong{

    display:block;

    margin-bottom:4px;

    color:#252A30;

    font-size:12px;

    line-height:1.35;

    font-weight:600;
}


.snto-step-date{

    min-height:28px;

    color:#6E747C;

    font-size:12px;

    line-height:1.35;
}


.snto-step-date span,
.snto-step-date small{

    display:block;

    font-size:inherit;
}


.snto-step-muted{

    color:#BABEC4 !important;
}



/* ============================================================
   INFO GRID
============================================================ */

.snto-info-grid{

    margin-bottom:12px;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:12px;
}


.snto-info-card,
.snto-items-card,
.snto-support-card{

    min-width:0;

    border:
        1px solid
        var(--snto-border);

    border-radius:6px;

    background:#FFFFFF;
}


.snto-info-card{

    padding:
        13px
        14px;
}



/* ============================================================
   CARD TITLE
============================================================ */

.snto-card-title{

    display:flex;

    align-items:center;

    gap:8px;
}


.snto-card-title > span{

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:
        var(--snto-orange);
}


.snto-card-title svg{

    width:17px;

    height:17px;
}


.snto-card-title strong{

    color:#1E2227;

    font-size:12px;

    line-height:1.3;

    font-weight:600;
}



/* ============================================================
   DETAIL LIST
============================================================ */

.snto-detail-list{

    margin-top:13px;

    display:flex;

    flex-direction:column;

    gap:7px;
}


.snto-detail-list > div{

    min-width:0;

    display:grid;

    grid-template-columns:
        48%
        minmax(0,1fr);

    gap:9px;

    align-items:start;
}


.snto-detail-list span{

    color:#777E87;

    font-size:12px;

    line-height:1.45;
}


.snto-detail-list strong{

    min-width:0;

    color:#292D33;

    font-size:12px;

    line-height:1.45;

    font-weight:500;

    overflow-wrap:anywhere;
}



/* ============================================================
   TRACKING NUMBER
============================================================ */

.snto-tracking-number{

    display:flex;

    align-items:center;

    gap:5px;
}


.snto-copy,
.snto-copy:hover,
.snto-copy:focus{

    width:18px !important;

    height:18px !important;

    min-width:18px !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border:0 !important;

    background:
        transparent !important;

    color:#7B8188 !important;

    box-shadow:none !important;

    cursor:pointer !important;
}


.snto-copy svg{

    width:13px;

    height:13px;
}



/* ============================================================
   OUTLINE BUTTON
============================================================ */

.snto-outline-btn{

    width:max-content;

    min-height:31px;

    margin-top:12px;

    padding:
        7px
        12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    border:
        1px solid
        var(--snto-orange);

    border-radius:4px;

    color:
        var(--snto-orange) !important;

    font-size:12px;

    line-height:1;

    font-weight:500;
}


.snto-outline-btn:hover{

    background:
        var(--snto-orange);

    color:#FFFFFF !important;
}


.snto-outline-btn svg{

    width:12px;

    height:12px;
}



/* ============================================================
   EMPTY SHIPMENT
============================================================ */

.snto-empty-shipment{

    min-height:119px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:#8A9098;
}


.snto-empty-shipment > span{

    width:36px;

    height:36px;

    flex:
        0 0
        36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--snto-orange-soft);

    color:
        var(--snto-orange);
}


.snto-empty-shipment svg{

    width:18px;

    height:18px;
}


.snto-empty-shipment p{

    max-width:170px;

    margin:0;

    font-size:12px;

    line-height:1.6;
}



/* ============================================================
   ADDRESS
============================================================ */

.snto-address{

    margin-top:13px;

    color:#42474E;

    font-size:12px;

    line-height:1.6;
}


.snto-address > strong{

    display:block;

    margin-bottom:3px;

    color:#22262B;

    font-size:12px;

    font-weight:600;
}


.snto-address p{

    margin:0 !important;
}


.snto-address-edit{

    margin-top:8px;

    display:inline-block;

    color:
        var(--snto-orange) !important;

    font-size:12px;

    text-decoration:
        underline !important;
}



/* ============================================================
   LOWER GRID
============================================================ */

.snto-lower-grid{

    display:grid;

    grid-template-columns:
        minmax(0,2fr)
        minmax(250px,1fr);

    gap:12px;
}



/* ============================================================
   ITEMS
============================================================ */

.snto-items-card{

    overflow:hidden;
}


.snto-items-head{

    min-height:43px;

    padding:
        10px
        14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-bottom:
        1px solid
        #EEEEEE;
}


.snto-items-head > span{

    color:#858B93;

    font-size:12px;
}


.snto-items-list{

    padding:
        0
        14px;
}


.snto-item{

    min-height:57px;

    display:grid;

    grid-template-columns:
        48px
        minmax(0,1fr)
        75px
        80px;

    gap:10px;

    align-items:center;

    border-bottom:
        1px solid
        #EEEEEE;
}


.snto-item:last-child{

    border-bottom:0;
}


.snto-item-image{

    width:46px;

    height:46px;

    overflow:hidden;

    border-radius:4px;

    background:#F7F7F7;
}


.snto-item-image img{

    width:100% !important;

    height:100% !important;

    margin:0 !important;

    padding:3px !important;

    display:block !important;

    object-fit:contain !important;
}


.snto-item-info{

    min-width:0;
}


.snto-item-info > strong{

    display:block;

    color:#22262B;

    font-size:12px;

    line-height:1.4;

    font-weight:500;
}


.snto-item-meta{

    margin-top:2px;

    color:#8B9199;

    font-size:12px;

    line-height:1.35;
}


.snto-item-meta p{

    margin:0 !important;
}


.snto-item-qty{

    color:#646A72;

    font-size:12px;

    text-align:center;
}


.snto-item-total{

    color:#1D2126;

    font-size:12px;

    font-weight:600;

    text-align:right;
}



/* ============================================================
   SUPPORT
============================================================ */

.snto-support-card{

    padding:
        17px;

    display:flex;

    align-items:center;

    gap:15px;
}


.snto-support-icon{

    width:50px;

    height:50px;

    flex:
        0 0
        50px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:
        var(--snto-orange);
}


.snto-support-icon svg{

    width:42px;

    height:42px;
}


.snto-support-card > div{

    min-width:0;
}


.snto-support-card strong{

    display:block;

    margin-bottom:5px;

    color:#22262B;

    font-size:12px;

    line-height:1.35;

    font-weight:600;
}


.snto-support-card p{

    max-width:210px;

    margin:
        0
        0
        12px;

    color:#858B93;

    font-size:12px;

    line-height:1.55;
}


.snto-support-card a{

    min-height:32px;

    padding:
        7px
        12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    border-radius:4px;

    background:
        var(--snto-orange);

    color:#FFFFFF !important;

    font-size:12px;

    font-weight:500;
}


.snto-support-card a:hover{

    background:
        var(--snto-orange-dark);
}


.snto-support-card a svg{

    width:12px;

    height:12px;
}



/* ============================================================
   LOADING
============================================================ */

.snto-results.is-loading{

    min-height:220px;

    position:relative;
}


.snto-results.is-loading::after{

    content:"";

    position:absolute;

    top:85px;

    left:50%;

    width:34px;

    height:34px;

    margin-left:-17px;

    border:
        3px solid
        rgba(
            242,
            84,
            11,
            .14
        );

    border-top-color:
        var(--snto-orange);

    border-radius:50%;

    animation:
        sntoSpin
        .65s
        linear
        infinite;
}


@keyframes sntoSpin{

    to{
        transform:
            rotate(360deg);
    }

}



/* ============================================================
   TABLET
============================================================ */

@media(max-width:950px){

    .snto-hero-inner{

        grid-template-columns:
            minmax(0,1fr)
            170px;
    }


    .snto-package-art > svg{

        width:165px;
    }


    .snto-hand-note{

        font-size:14px;
    }


    .snto-form{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .snto-track-btn{

        grid-column:
            1 / -1;

        margin-top:
            0 !important;
    }


    .snto-info-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .snto-info-card:last-child{

        grid-column:
            1 / -1;
    }

}



/* ============================================================
   MOBILE
============================================================ */

@media(max-width:767px){

    .snto-container{

        width:
            calc(
                100% - 28px
            );
    }


    .snto-hero-inner{

        min-height:0;

        display:block;

        padding-top:31px;

        padding-bottom:25px;
    }


    .snto-hero-main h1{

        font-size:29px;
    }


    .snto-hero-main > p{

        max-width:310px;

        margin:
            0
            auto
            20px;

        font-size:12px;
    }


    .snto-package-art{

        display:none;
    }


    .snto-form{

        padding:13px;

        display:block;

        border-radius:8px;
    }


    .snto-form label{

        margin-bottom:11px;
    }


    .snto-form label small{

        font-size:12px;
    }


    .snto-track-btn{

        margin-top:
            3px !important;
    }


    .snto-results{

        padding-top:13px;

        padding-bottom:40px;
    }


    .snto-result-card{

        padding:
            14px
            12px;
    }


    .snto-result-head{

        align-items:flex-start;
    }


    .snto-last-update{

        flex-direction:column;

        align-items:flex-end;

        gap:5px;

        text-align:right;
    }


    /*
     * MOBILE TIMELINE
     */

    .snto-timeline{

        margin:
            4px
            0
            20px;

        display:flex;

        flex-direction:column;

        gap:0;
    }


    .snto-step{

        min-height:70px;

        padding-left:48px;

        text-align:left;
    }


    .snto-step-marker{

        position:absolute;

        top:0;

        left:0;

        margin:0;
    }


    .snto-step-line{

        top:-37px;

        left:16px;

        right:auto;

        width:0;

        height:38px;

        border-top:0;

        border-left:
            1px dashed
            #C8CDD3;
    }


    .snto-step.is-active
    .snto-step-line{

        border-top:0;

        border-left:
            2px solid
            var(--snto-orange);
    }


    .snto-step strong{

        padding-top:3px;

        font-size:12px;
    }


    .snto-step-date{

        font-size:12px;
    }


    .snto-info-grid{

        grid-template-columns:
            1fr;

        gap:10px;
    }


    .snto-info-card:last-child{

        grid-column:auto;
    }


    .snto-lower-grid{

        grid-template-columns:
            1fr;

        gap:10px;
    }


    .snto-item{

        grid-template-columns:
            46px
            minmax(0,1fr)
            auto;

        padding:
            7px
            0;
    }


    .snto-item-qty{

        grid-column:2;

        text-align:left;
    }


    .snto-item-total{

        grid-column:3;

        grid-row:
            1 / span 2;

        align-self:center;
    }


    .snto-support-card{

        padding:
            16px
            14px;
    }

}



/* ============================================================
   SMALL MOBILE
============================================================ */

@media(max-width:390px){

    .snto-container{

        width:
            calc(
                100% - 20px
            );
    }


    .snto-result-head{

        display:block;
    }


    .snto-last-update{

        margin-top:10px;

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        text-align:left;
    }


    .snto-detail-list > div{

        grid-template-columns:
            44%
            minmax(0,1fr);
    }

}
.snto{--snto-orange:var(--core-primary,#6B0A26)!important;--snto-orange-dark:var(--core-primary-hover,#4E071C)!important;--snto-orange-soft:rgba(var(--core-primary-rgb,107,10,38),.07)!important;--snto-green:var(--core-success,#88B78A)!important;--snto-black:var(--core-dark,#121212)!important;--snto-text:var(--core-gray-800,#292828)!important;--snto-muted:var(--core-gray-100,#686868)!important;--snto-border:var(--core-border,#E3D8D2)!important}