/* =========================================
   3TREE_TRACK_LUXURY_V1
   Luxury Track Order
   ========================================= */


/* Page background */

body:has(form input[placeholder*="رقم الطلب"]) {
    background:
        radial-gradient(
            circle at 50% 10%,
            #f8f3ea 0,
            #f5f1e9 34%,
            #eee8df 100%
        ) !important;
}


/* Main tracking area */

body:has(form input[placeholder*="رقم الطلب"])
main {
    min-height: 70vh;
}


/* Tracking heading */

body:has(form input[placeholder*="رقم الطلب"])
main h1,
body:has(form input[placeholder*="رقم الطلب"])
main h2 {
    color: #201a16 !important;
    font-weight: 800 !important;
    letter-spacing: -.4px;
}


/* Small heading / eyebrow */

body:has(form input[placeholder*="رقم الطلب"])
main h1::before,
body:has(form input[placeholder*="رقم الطلب"])
main h2::before {
    content: "3TREE · ORDER TRACKING";
    display: block;
    margin-bottom: 11px;
    color: #b58a4d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.8px;
}


/* Main tracking form */

body:has(form input[placeholder*="رقم الطلب"])
main form {
    position: relative;
    overflow: hidden;

    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 34px !important;

    border:
        1px solid rgba(181,138,77,.28) !important;

    border-radius: 2px !important;

    background:
        rgba(255,255,255,.94) !important;

    box-shadow:
        0 22px 55px rgba(42,31,20,.08) !important;
}


/* Gold top detail */

body:has(form input[placeholder*="رقم الطلب"])
main form::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c89d59,
            transparent
        );
}


/* Order input */

body:has(form input[placeholder*="رقم الطلب"])
main form input {
    min-height: 52px !important;

    border:
        1px solid #d9d0c3 !important;

    border-radius: 0 !important;

    background: #fff !important;

    color: #241e19 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    outline: none !important;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}

body:has(form input[placeholder*="رقم الطلب"])
main form input:focus {
    border-color: #bd9251 !important;

    box-shadow:
        0 0 0 3px rgba(189,146,81,.10) !important;
}


/* Track button */

body:has(form input[placeholder*="رقم الطلب"])
main form button[type="submit"] {
    min-height: 52px !important;

    border: 1px solid #b98d4b !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            135deg,
            #d7ad69,
            #bd8e49
        ) !important;

    color: #211a13 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;

    box-shadow: none !important;

    transition:
        transform .2s ease,
        filter .2s ease !important;
}

body:has(form input[placeholder*="رقم الطلب"])
main form button[type="submit"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}


/* Results cards */

body:has(form input[placeholder*="رقم الطلب"])
main form ~ div {
    border-color:
        rgba(181,138,77,.20) !important;
}


/* Tracking result area */

body:has(form input[placeholder*="رقم الطلب"])
main [class*="border"] {
    border-color:
        #ded5c9 !important;
}


/* Status circles */

body:has(form input[placeholder*="رقم الطلب"])
main [class*="rounded-full"] {
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


/* Error messages */

body:has(form input[placeholder*="رقم الطلب"])
main [class*="red"] {
    border-radius: 0 !important;
}


/* Mobile */

@media (max-width: 768px) {

    body:has(form input[placeholder*="رقم الطلب"])
    main form {
        padding: 22px !important;
    }

    body:has(form input[placeholder*="رقم الطلب"])
    main h1,
    body:has(form input[placeholder*="رقم الطلب"])
    main h2 {
        font-size: 27px !important;
    }

}


/* Very small screens */

@media (max-width: 480px) {

    body:has(form input[placeholder*="رقم الطلب"])
    main form {
        padding: 18px !important;
    }

}