.wc-ol-wrapper { max-width: 800px; margin: 30px auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #333; scroll-margin-top: 40px; }

/* Smooth AJAX Fade Animation */
.wc-ol-fade-in { animation: wc-ol-fadeIn 0.35s ease-out forwards; }
@keyframes wc-ol-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.wc-ol-card { background: #ffffff; padding: 25px 30px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 15px rgba(0,0,0,0.03); max-width: 550px; margin: 0 auto; }

.wc-ol-header { text-align: center; margin-bottom: 15px; }
.wc-ol-header h2 { margin: 0; font-size: 24px; font-weight: 800; color: #111; letter-spacing: -0.5px; }

.wc-ol-header-compact { margin-bottom: 20px; }
.wc-ol-header-compact h3 { margin: 0; font-size: 18px; color: #111; text-align: center;}

.wc-ol-input-group { display: flex; flex-direction: row; gap: 8px; transition: all 0.3s ease; }
.wc-ol-input-group input { flex: 1; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; outline: none; transition: all 0.2s ease; background: #f9fafb; color: #111; box-sizing: border-box; }
.wc-ol-input-group input:focus { border-color: #000; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }

.btn-wc-ol-primary { white-space: nowrap; background: #000; color: #fff; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; }
.btn-wc-ol-primary:hover { background: #333; transform: translateY(-1px); }

.wc-ol-inline-error { display: none; color: #b91c1c; font-size: 12px; font-weight: 600; margin-top: 8px; text-align: left; padding-left: 4px; }

.btn-wc-ol-action { background: #000; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 12px; transition: all 0.2s ease; text-transform: uppercase;}
.btn-wc-ol-action:hover { background: #333; transform: scale(1.05); }

.btn-wc-ol-back { background: #f3f4f6; color: #374151; border: none; padding: 8px 16px; border-radius: 20px; font-weight: 600; cursor: pointer; font-size: 13px; transition: 0.2s; }
.btn-wc-ol-back:hover { background: #e5e7eb; color: #000; }

.btn-wc-ol-link { background: none; border: none; color: #6b7280; cursor: pointer; font-weight: 600; padding: 0; font-size: 13px; }
.btn-wc-ol-link:hover { color: #000; text-decoration: underline; }

.wc-ol-list { display: flex; flex-direction: column; gap: 10px; }
.wc-ol-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; transition: all 0.2s ease; }
.wc-ol-row:hover { border-color: #d1d5db; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transform: translateY(-2px); }

.wc-ol-meta strong { display: flex; align-items: center; gap: 8px; color: #111; font-size: 15px; margin-bottom: 4px; flex-wrap: wrap; }
.wc-ol-meta span { color: #6b7280; font-size: 12px; display: block; }

.wc-ol-badge { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 4px 10px; border-radius: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.wc-ol-status-completed, .wc-ol-status-delivered { background: #d1e7dd; color: #0f5132; }
.wc-ol-status-processing, .wc-ol-status-shipped { background: #cfe2ff; color: #084298; }
.wc-ol-status-on-hold, .wc-ol-status-pending { background: #fff3cd; color: #664d03; }
.wc-ol-status-cancelled, .wc-ol-status-failed { background: #f8d7da; color: #842029; }
.wc-ol-status-refunded { background: #e2e3e5; color: #41464b; }

.wc-ol-alert { color: #b91c1c; background: #fef2f2; padding: 12px 20px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; border: 1px solid #fecaca; text-align: center; font-weight: 600;}

.wc-ol-nav-bar { margin-bottom: 20px; }
.wc-ol-native-output { background: #fff; padding: 30px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }

/* Ensure native WC tracking form is NEVER shown inside our output */
.wc-ol-native-output form.track_order { display: none !important; }

/* Mobile Rules */
@media screen and (max-width: 600px) {
    .wc-ol-wrapper { margin: 20px 15px; }
    .wc-ol-card { padding: 20px 15px; }
    .wc-ol-header h2 { font-size: 20px; }
    .wc-ol-input-group { flex-direction: column; gap: 8px; }
    .btn-wc-ol-primary { width: 100%; }
    .wc-ol-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px; }
    .wc-ol-row form, .btn-wc-ol-action { width: 100%; text-align: center; }
    .wc-ol-native-output { padding: 20px 15px; }
}