/* All your existing styles kept 100% same */
body { font-family: "Inter", "Arial", sans-serif; background: #f5f7fa; color: #333; margin: 0; padding: 0; } 
.order-lookup-main { max-width: 450px !important; background: #fff; padding: 35px 30px !important; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin: 40px auto; transition: all 0.3s ease; } 
.container:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); } 
h2 { text-align: center; font-size: 1.8rem; color: #222; margin-bottom: 25px; letter-spacing: 0.5px; } 
label { display: block; font-weight: 600; margin-bottom: 6px; color: #444; } 
input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 18px; font-size: 1rem; transition: border 0.2s ease; } 
input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.15); } 

button#submitBtn { width: 100%; background-color: #f25b00 !important; color: white; font-size: 16px; padding: 12px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s ease, transform 0.1s ease; } 
button#submitBtn:hover:not(:disabled) { background: #0056d2; transform: translateY(-1px); } 
button#submitBtn:disabled { background: #ccc; cursor: not-allowed; } 

.error { color: #dc3545; text-align: center; font-size: 0.9em; margin-bottom: 15px; } 
.success { color: #28a745; text-align: center; font-size: 0.95em; margin-top: 10px; } 
.po-customcontainer { padding: 40px 40px 40px 40px !important; } 
.order-lookup-main h2 { font-family: Roboto; font-size: 30px; color: #222; } 
.order-lookup-main label { font-family: Roboto; color: #222; } 

.spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top: 4px solid #f25b00; border-radius: 50%; animation: spin 1s linear infinite; margin: 10px auto; } 
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

@media (max-width: 600px) { .container { width: 90%; padding: 25px 20px; } } 
@media (max-width: 540px){ 
.order-lookup-main { padding: 20px 20px !important; width: 100% !important; } 
.subtotal, .grand-total { width: 100% !important; display: block !important; margin: 0 !important; } 
#orderItems div { display: block !important; } 
.order-details { width: 100% !important; min-width: 100% !important; } 
.total-div-section { width: 100% !important; min-width: 100% !important; } 
} 
.order-lookup-page h2, .order-lookup-page h3 { text-align: left; font-family: Roboto; color: #222; font-size: 30px; } 
.order-lookup-page hr { margin: 10px; } 
#orderShippingAddress { font-family: "Roboto Mono", monospace; font-size: 18px; font-weight: 500; margin: 0px !important; } 
#orderItems p { font-family: "Roboto Mono", monospace; font-size: 15px; color: #000; } 
#orderItems img { border: none !important; } 
#orderItems p strong { font-weight: 500; } 
#orderItems div { font-family: "Roboto Mono", monospace; font-size: 14px; } 
.total-div-section p { font-family: "Roboto Mono", monospace; font-size: 18px; margin-top: 15px; margin-bottom: 20px; } 
.order-details p { font-family: "Roboto Mono", monospace; font-size: 16px; } 
.order-details button { font-family: "Roboto Mono", monospace; font-size: 16px; border: 1px solid #000; border-radius: 3px; } 
#shippingAddress p { font-family: "Roboto Mono", monospace; font-size: 18px; margin-bottom: 5px; } 
@media (max-width: 767px){ #orderSummaryContainer{ display: block !important; } } 
.subtotal , .grand-total{ display: flex; align-items: center; justify-content: space-between; width: 400px; margin-left: auto; flex-wrap: wrap; }

#searchForm #loader{
    display: none; text-align: center; margin: 15px 0;
}
#searchForm #loader .spinner{
    width: 40px; height: 40px; border: 4px solid #ccc; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin: auto;
}
#searchForm #loader p{
    font-size: 0.9em; color: #666; margin-top: 8px;
}
.sheight{
    height: 25px;
}
#orderSummaryContainer{
    display: none; max-width: 1000px; margin: auto; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 0 8px rgba(0,0,0,0.1); margin-top: 30px;
}
#orderSummaryContainer .order-lookup-page{
    display: flex; flex-wrap: wrap; gap: 30px;
}
.total-div-section{
    flex: 2; min-width: 300px;
}
.total-div-section .subtotal, .total-div-section .grand-total{
    text-align: right;
}
.order-lookup-page .order-details{
    flex: 1; min-width: 250px;
}
.stprint{
    margin-top: 10px; padding: 8px 16px;
}
.order-lookup-page .order-details .h3{
    margin-top: 30px;
}
.searchorder-div{
    margin-top: 30px;
}
.searchorder-div button{
    padding: 10px 20px; background: #f25b00; color: white; border: none; border-radius: 5px; cursor: pointer;font-size:20px
}