/**
 * dir assets/css/
 * file track-order.css
 * Styles for Smart Order Tracking Page (เฉพาะตัวฟอร์ม)
 */

.gustabe-tracking-card {
    max-width: 500px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}
.gustabe-tracking-card .tracking-header .icon-wrapper {
    width: 80px; height: 80px; background: var(--primary-light, #e6fcfb); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.gustabe-tracking-card .tracking-header .icon-wrapper i { font-size: 40px; color: var(--primary-color, #04a39c); }
.gustabe-tracking-card .tracking-header p { line-height: 1.6; margin-bottom: 0; }

.gustabe-form .form-input-group label { font-size: 13px; font-weight: 600; color: var(--text-dark, #1e293b); margin-bottom: 8px; display: block; }
.gustabe-form .input-with-icon { position: relative; }
.gustabe-form .input-with-icon i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 20px; transition: 0.3s; }
.gustabe-form .input-with-icon input {
    width: 100%; padding: 12px 15px 12px 45px !important; border: 1px solid var(--border-light, #e2e8f0) !important;
    border-radius: 10px !important; background: var(--bg-light, #f8fafc); transition: all 0.3s; height: 50px; font-size: 15px;
}
.gustabe-form .input-with-icon input:focus { border-color: var(--primary-color, #04a39c) !important; background: #fff; box-shadow: 0 0 0 4px rgba(4, 163, 156, 0.1); outline: none; }
.gustabe-form .input-with-icon:focus-within i { color: var(--primary-color, #04a39c); }