/* =========================================================
   RYNA WOMAN - TRACK ORDER
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: #fff7f9;
    color: #44373d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

a {
    text-decoration: none;
}


/* =========================================================
   PAGE
========================================================= */

.track-order-page {
    width: 100%;
    min-height: 100vh;

    padding:
        42px 0 80px;

    background:
        linear-gradient(
            180deg,
            #fff7f9 0%,
            #fffafb 100%
        );
}

.track-order-container {
    width:
        min(
            1040px,
            calc(100% - 36px)
        );

    margin:
        0 auto;
}


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

.track-order-header {
    margin-bottom:
        28px;
}

.track-order-header > span {
    display: block;

    margin-bottom:
        6px;

    color:
        #b66d81;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.8px;
}

.track-order-header h1 {
    margin:
        0;

    color:
        #33272d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        31px;

    font-weight:
        400;
}

.track-order-header p {
    max-width:
        600px;

    margin:
        9px 0 0;

    color:
        #85757c;

    font-size:
        10px;

    line-height:
        1.6;
}


/* =========================================================
   SEARCH
========================================================= */

.track-search-card {
    margin-bottom:
        20px;

    padding:
        22px;

    border:
        1px solid
        #eadde1;

    background:
        #fffafb;

    box-shadow:
        0 10px 30px
        rgba(
            74,
            48,
            57,
            .04
        );
}

.track-search-form {
    display:
        grid;

    grid-template-columns:
        1.2fr
        1fr
        1fr
        auto;

    align-items:
        end;

    gap:
        12px;
}

.track-input-group label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #66565d;

    font-size:
        9px;

    font-weight:
        600;
}

.track-input-group label small {
    color:
        #aa9ca1;

    font-size:
        8px;

    font-weight:
        400;
}

.track-input-wrap {
    position:
        relative;
}

.track-input-wrap i {
    position:
        absolute;

    left:
        12px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #b88a99;

    font-size:
        10px;
}

.track-input-wrap input {
    width:
        100%;

    height:
        42px;

    padding:
        0 12px 0 33px;

    border:
        1px solid
        #dfd2d6;

    outline:
        none;

    background:
        #fff;

    color:
        #40343a;

    font-size:
        9px;
}

.track-input-wrap input:focus {
    border-color:
        #c38a9b;

    box-shadow:
        0 0 0 3px
        rgba(
            195,
            138,
            155,
            .08
        );
}

.track-submit-button {
    height:
        42px;

    padding:
        0 18px;

    border:
        1px solid
        #302629;

    background:
        #302629;

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        600;

    white-space:
        nowrap;
}

.track-submit-button:hover {
    border-color:
        #b66d81;

    background:
        #b66d81;
}

.track-search-note {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin:
        13px 0 0;

    color:
        #9a8b91;

    font-size:
        8px;
}


/* =========================================================
   ERROR
========================================================= */

.track-error {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        20px;

    padding:
        12px 14px;

    border:
        1px solid
        #edd2d9;

    background:
        #fff4f6;

    color:
        #9c5e70;

    font-size:
        9px;
}


/* =========================================================
   ORDER CARD
========================================================= */

.track-order-card {
    margin-bottom:
        18px;

    padding:
        22px;

    border:
        1px solid
        #eadde1;

    background:
        #fffafb;
}

.track-order-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        #f0e5e8;
}

.track-order-label {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #b66d81;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}

.track-order-top h2 {
    margin:
        0;

    color:
        #3b2d33;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    font-weight:
        400;
}

.track-order-top p {
    margin:
        5px 0 0;

    color:
        #8b7c82;

    font-size:
        8px;
}

.track-status-pill {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 11px;

    background:
        #fae9ee;

    color:
        #9b6072;

    font-size:
        8px;

    font-weight:
        700;
}

.track-status-pill span {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #b66d81;
}


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

.tracking-timeline {
    display:
        flex;

    align-items:
        flex-start;

    padding:
        25px 0 4px;
}

.tracking-step {
    width:
        150px;

    text-align:
        center;
}

.tracking-step-icon {
    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 9px;

    border:
        1px solid
        #dfd4d8;

    border-radius:
        50%;

    background:
        #fff;

    color:
        #b7a8ae;

    font-size:
        11px;
}

.tracking-step-content strong {
    display:
        block;

    color:
        #8f8086;

    font-size:
        8px;

    font-weight:
        600;
}

.tracking-step-content span {
    display:
        block;

    margin-top:
        3px;

    color:
        #b0a1a7;

    font-size:
        7px;
}

.tracking-step.completed
.tracking-step-icon {
    border-color:
        #d7b0bc;

    background:
        #fae9ee;

    color:
        #b66d81;
}

.tracking-step.completed
.tracking-step-content strong {
    color:
        #6f5a62;
}

.tracking-step.current
.tracking-step-icon {
    border-color:
        #b66d81;

    background:
        #b66d81;

    color:
        #fff;

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

.tracking-step.current
.tracking-step-content strong {
    color:
        #b66d81;
}

.tracking-step.current
.tracking-step-content span {
    color:
        #b66d81;
}

.tracking-connector {
    flex:
        1;

    height:
        1px;

    margin-top:
        20px;

    background:
        #e8dde1;
}

.tracking-connector.completed {
    background:
        #d4afba;
}


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

.track-info-grid {
    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        18px;
}

.track-info-card,
.track-items-card {
    padding:
        20px;

    border:
        1px solid
        #eadde1;

    background:
        #fffafb;
}

.track-card-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding-bottom:
        15px;

    margin-bottom:
        14px;

    border-bottom:
        1px solid
        #f0e5e8;
}

.track-card-icon {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #fae9ee;

    color:
        #b66d81;

    font-size:
        11px;
}

.track-card-heading span {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #b66d81;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.1px;
}

.track-card-heading h3 {
    margin:
        0;

    color:
        #44363c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    font-weight:
        400;
}


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

.track-detail-list {
    display:
        grid;

    gap:
        11px;
}

.track-detail-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        #8a7a81;

    font-size:
        8px;
}

.track-detail-row strong {
    color:
        #4b3c43;

    text-align:
        right;

    font-size:
        8px;

    font-weight:
        600;
}

.track-detail-row.total-row {
    margin-top:
        2px;

    padding-top:
        11px;

    border-top:
        1px solid
        #f0e5e8;
}

.track-detail-row.total-row strong {
    color:
        #b66d81;

    font-size:
        12px;
}

.payment-status.success {
    color:
        #64806e;
}


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

.track-address {
    min-height:
        95px;

    color:
        #66575e;

    font-size:
        9px;

    line-height:
        1.7;
}


/* =========================================================
   EXTERNAL TRACK
========================================================= */

.external-track-button {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        15px;

    padding:
        9px 12px;

    border:
        1px solid
        #e0cdd3;

    background:
        #fff3f6;

    color:
        #a45f74;

    font-size:
        8px;

    font-weight:
        600;
}

.external-track-button:hover {
    border-color:
        #b66d81;

    color:
        #b66d81;
}


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

.track-items-card {
    margin-bottom:
        18px;
}

.track-items-list {
    display:
        grid;

    gap:
        1px;
}

.track-item {
    display:
        grid;

    grid-template-columns:
        58px
        1fr
        auto;

    align-items:
        center;

    gap:
        12px;

    padding:
        10px 0;

    border-bottom:
        1px solid
        #f1e7e9;
}

.track-item:last-child {
    border-bottom:
        0;
}

.track-item-image {
    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f8edf1;

    color:
        #c2aeb6;

    font-size:
        15px;
}

.track-item-info strong {
    display:
        block;

    color:
        #46383f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        11px;

    font-weight:
        400;
}

.track-item-info span {
    display:
        block;

    margin-top:
        4px;

    color:
        #95858b;

    font-size:
        8px;
}

.track-item-price {
    color:
        #4d3d44;

    font-size:
        10px;

    font-weight:
        600;
}

.track-no-items {
    padding:
        15px 0;

    color:
        #93838a;

    font-size:
        9px;
}


/* =========================================================
   ACTIONS
========================================================= */

.track-actions {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        10px;
}

.track-secondary-button,
.track-primary-button {
    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 15px;

    font-size:
        8px;

    font-weight:
        600;
}

.track-secondary-button {
    border:
        1px solid
        #dfd1d6;

    background:
        #fffafb;

    color:
        #75666d;
}

.track-primary-button {
    border:
        1px solid
        #302629;

    background:
        #302629;

    color:
        #fff;
}

.track-secondary-button:hover {
    border-color:
        #c68e9e;

    color:
        #a55f74;
}

.track-primary-button:hover {
    border-color:
        #b66d81;

    background:
        #b66d81;
}


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

@media (max-width: 850px) {

    .track-search-form {
        grid-template-columns:
            1fr
            1fr;
    }

    .track-submit-button {
        width:
            100%;
    }

    .tracking-timeline {
        overflow-x:
            auto;

        padding-bottom:
            12px;
    }

    .tracking-step {
        min-width:
            120px;
    }

}


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

@media (max-width: 620px) {

    .track-order-page {
        padding:
            28px 0 55px;
    }

    .track-order-container {
        width:
            calc(100% - 18px);
    }

    .track-order-header h1 {
        font-size:
            27px;
    }

    .track-search-card {
        padding:
            15px;
    }

    .track-search-form {
        grid-template-columns:
            1fr;
    }

    .track-info-grid {
        grid-template-columns:
            1fr;
    }

    .track-order-card {
        padding:
            16px;
    }

    .track-order-top {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .tracking-timeline {
        padding-top:
            20px;
    }

    .tracking-step {
        min-width:
            108px;
    }

    .tracking-step-icon {
        width:
            34px;

        height:
            34px;
    }

    .track-actions {
        flex-direction:
            column;
    }

    .track-secondary-button,
    .track-primary-button {
        width:
            100%;
    }

}