/* ── Order Tracker – Frontend Styles ──────────────────────────────── */

.ot-tracking-wrap {
    max-width: 720px;
    margin: 0 auto;
    font-family: inherit;
}

/* Form box */
.ot-form-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 32px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ot-form-title { margin: 0 0 6px; font-size: 1.4rem; font-weight: 700; color: #1a202c; }
.ot-form-desc  { margin: 0 0 24px; color: #718096; font-size: .95rem; }

.ot-field { margin-bottom: 16px; }
.ot-field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: #2d3748; }
.ot-optional { font-weight: 400; color: #a0aec0; }
.ot-field input {
    width: 100%; padding: 10px 14px; border: 1px solid #cbd5e0; border-radius: 8px;
    font-size: 1rem; color: #2d3748; transition: border-color .15s; box-sizing: border-box;
}
.ot-field input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.15); }

.ot-btn {
    display: inline-block; margin-top: 8px; padding: 11px 28px;
    background: #667eea; color: #fff; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s;
}
.ot-btn:hover    { background: #5a67d8; }
.ot-btn:disabled { opacity: .6; cursor: not-allowed; }

.ot-message { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: .9rem; }
.ot-message.ot-error   { background: #fff5f5; color: #c53030; border: 1px solid #feb2b2; }
.ot-message.ot-success { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }

/* Results card */
.ot-results {
    margin-top: 24px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Order header */
.ot-order-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 28px; background: #f7fafc; border-bottom: 1px solid #e2e8f0; gap: 12px; flex-wrap: wrap;
}
.ot-header-right { display: flex; align-items: center; gap: 12px; }
.ot-label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #a0aec0; display: block; margin-bottom: 2px;
}
.ot-order-number { font-size: 1.2rem; font-weight: 700; color: #1a202c; }



/* Meta grid */
.ot-order-meta-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-bottom: 1px solid #e2e8f0;
}
.ot-meta-block {
    padding: 16px 24px; display: flex; flex-direction: column; gap: 2px;
    border-right: 1px solid #e2e8f0;
}
.ot-meta-block:last-child { border-right: none; }
.ot-meta-value { font-size: .9rem; font-weight: 600; color: #1a202c; }
.ot-meta-sub   { font-size: .82rem; color: #667eea; text-decoration: none; }
.ot-meta-sub:hover { text-decoration: underline; }

/* Tracking URL bar */
.ot-tracking-url-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 28px; background: #ebf8ff; border-bottom: 1px solid #bee3f8;
    font-size: .9rem; color: #2a4365;
}
.ot-tracking-url-bar svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #3182ce; }
.ot-tracking-url-bar a   { color: #2b6cb0; font-weight: 600; }
.ot-tracking-url-bar a:hover { text-decoration: underline; }

/* Notes */
.ot-notes-wrap, .ot-history-wrap { padding: 20px 28px; }
.ot-notes-wrap { border-bottom: 1px solid #e2e8f0; }
.ot-notes-wrap h4, .ot-history-wrap h4 {
    margin: 0 0 10px; font-size: .85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: #718096;
}
.ot-notes-content { font-size: .92rem; color: #4a5568; line-height: 1.7; }
.ot-notes-content p  { margin: 0 0 10px; }
.ot-notes-content p:last-child { margin-bottom: 0; }
.ot-notes-content strong, .ot-notes-content b { font-weight: 700; color: #2d3748; }
.ot-notes-content a  { color: #667eea; }
.ot-notes-content ul, .ot-notes-content ol { padding-left: 20px; margin: 0 0 10px; }
.ot-notes-content li { margin-bottom: 4px; }

/* Status history */
.ot-history-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ot-history-list::before {
    content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
    width: 2px; background: #e2e8f0;
}
.ot-history-item {
    position: relative; padding: 4px 0 12px 28px; font-size: .88rem; color: #4a5568;
}
.ot-history-item::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #667eea; border: 3px solid #fff; box-shadow: 0 0 0 2px #667eea;
}
.ot-history-date  { display: block; font-size: .78rem; color: #a0aec0; margin-bottom: 3px; }
.ot-history-note  { display: block; margin-top: 4px; font-style: italic; color: #718096; }

/* Badges */
.ot-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; background: #e2e8f0; color: #4a5568;
}
.ot-status-order_received          { background: #e2e8f0; color: #2d3748; }
.ot-status-documents_received      { background: #c6f6d5; color: #22543d; }
.ot-status-pending_documents       { background: #fefcbf; color: #744210; }
.ot-status-application_prepared    { background: #e9d8fd; color: #44337a; }
.ot-status-application_submitted   { background: #bee3f8; color: #2a4365; }
.ot-status-processing              { background: #bee3f8; color: #2a4365; }
.ot-status-additional_requirements { background: #fbd38d; color: #7b341e; }
.ot-status-under_process           { background: #c6f6d5; color: #22543d; }
.ot-status-estimated_completion    { background: #e9d8fd; color: #44337a; }
.ot-status-sent_dispatched         { background: #b2f5ea; color: #234e52; }
.ot-status-delivered               { background: #9ae6b4; color: #22543d; }
.ot-status-on_hold                 { background: #fefcbf; color: #744210; }
.ot-status-completed_packaged      { background: #c6f6d5; color: #22543d; }
.ot-status-cancelled               { background: #fed7d7; color: #742a2a; }
.ot-status-refunded                { background: #fbd38d; color: #7b341e; }



/* Responsive */
@media (max-width: 600px) {
    .ot-form-box { padding: 24px 20px; }
    .ot-order-meta-grid { grid-template-columns: 1fr; }
    .ot-meta-block { border-right: none; border-bottom: 1px solid #e2e8f0; }
    .ot-meta-block:last-child { border-bottom: none; }
}