/* WC Order Progress - Frontend Tracking v2.2 — CSS Isolated */
:root {
    --wcop-primary:#4F6AF0;--wcop-primary-light:#E8ECFD;--wcop-primary-dark:#3A51C4;
    --wcop-success:#22C55E;--wcop-success-light:#DCFCE7;--wcop-warning:#F59E0B;--wcop-warning-light:#FEF3C7;
    --wcop-gray-50:#F9FAFB;--wcop-gray-100:#F3F4F6;--wcop-gray-200:#E5E7EB;--wcop-gray-300:#D1D5DB;
    --wcop-gray-400:#9CA3AF;--wcop-gray-500:#6B7280;--wcop-gray-600:#4B5563;--wcop-gray-700:#374151;
    --wcop-gray-800:#1F2937;--wcop-gray-900:#111827;
    --wcop-radius:12px;--wcop-radius-lg:16px;--wcop-radius-xl:20px;
    --wcop-shadow:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.03);
    --wcop-shadow-lg:0 8px 30px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04);
    --wcop-font-heading:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --wcop-font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* === CSS RESET for all frontend containers === */
.wcop-lookup-wrap *, .wcop-lookup-wrap *::before, .wcop-lookup-wrap *::after,
.wcop-tracking-wrap *, .wcop-tracking-wrap *::before, .wcop-tracking-wrap *::after {
    box-sizing: border-box !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important;
}
.wcop-lookup-wrap h1, .wcop-lookup-wrap h2, .wcop-lookup-wrap h3, .wcop-lookup-wrap h4, .wcop-lookup-wrap h5, .wcop-lookup-wrap h6,
.wcop-tracking-wrap h1, .wcop-tracking-wrap h2, .wcop-tracking-wrap h3, .wcop-tracking-wrap h4, .wcop-tracking-wrap h5, .wcop-tracking-wrap h6 {
    margin: 0 !important; padding: 0 !important; border: none !important; background: none !important;
    line-height: 1.4 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--wcop-gray-900) !important;
}
.wcop-lookup-wrap p, .wcop-tracking-wrap p { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; line-height: 1.5 !important; }
.wcop-lookup-wrap a, .wcop-tracking-wrap a { text-decoration: none !important; box-shadow: none !important; }
.wcop-lookup-wrap button, .wcop-lookup-wrap input, .wcop-lookup-wrap select, .wcop-lookup-wrap textarea,
.wcop-tracking-wrap button, .wcop-tracking-wrap input, .wcop-tracking-wrap select, .wcop-tracking-wrap textarea {
    font-family: var(--wcop-font-body) !important; box-shadow: none !important; line-height: 1.4 !important;
}
.wcop-lookup-wrap ul, .wcop-lookup-wrap ol, .wcop-lookup-wrap li,
.wcop-tracking-wrap ul, .wcop-tracking-wrap ol, .wcop-tracking-wrap li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.wcop-lookup-wrap img, .wcop-tracking-wrap img { max-width: 100% !important; height: auto !important; border: none !important; }

/* === LOOKUP === */
.wcop-lookup-wrap { max-width: 500px !important; margin: 40px auto !important; padding: 0 16px !important; }
.wcop-lookup-wrap .wcop-lookup-card { background: #fff !important; border-radius: var(--wcop-radius-xl) !important; box-shadow: var(--wcop-shadow-lg) !important; padding: 48px 40px !important; text-align: center !important; }
.wcop-lookup-wrap .wcop-lookup-icon { width: 72px !important; height: 72px !important; border-radius: var(--wcop-radius) !important; background: var(--wcop-primary-light) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 24px !important; }
.wcop-lookup-wrap .wcop-lookup-card h2 { font-family: var(--wcop-font-heading) !important; font-size: 24px !important; font-weight: 800 !important; color: var(--wcop-gray-900) !important; margin: 0 0 8px !important; }
.wcop-lookup-wrap .wcop-lookup-desc { font-family: var(--wcop-font-body) !important; font-size: 14px !important; color: var(--wcop-gray-500) !important; margin: 0 0 32px !important; line-height: 1.6 !important; }
.wcop-lookup-wrap .wcop-lookup-error { background: #FEF2F2 !important; border: 1px solid #FECACA !important; color: #DC2626 !important; padding: 12px 16px !important; border-radius: 8px !important; font-size: 14px !important; margin-bottom: 20px !important; }
.wcop-lookup-wrap .wcop-form-group { text-align: left !important; margin-bottom: 20px !important; }
.wcop-lookup-wrap .wcop-form-group label { display: block !important; font-family: var(--wcop-font-body) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--wcop-gray-700) !important; margin-bottom: 8px !important; background: none !important; border: none !important; padding: 0 !important; }
.wcop-lookup-wrap .wcop-form-input { width: 100% !important; padding: 12px 16px !important; border: 1.5px solid var(--wcop-gray-200) !important; border-radius: 8px !important; font-size: 14px !important; font-family: var(--wcop-font-body) !important; color: var(--wcop-gray-800) !important; transition: all .2s !important; background: #fff !important; box-sizing: border-box !important; -webkit-appearance: none !important; }
.wcop-lookup-wrap .wcop-form-input:focus { outline: none !important; border-color: var(--wcop-primary) !important; box-shadow: 0 0 0 3px rgba(79,106,240,.12) !important; }
.wcop-lookup-wrap .wcop-form-input::placeholder { color: var(--wcop-gray-400) !important; }
.wcop-lookup-wrap .wcop-lookup-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px !important; background: var(--wcop-primary) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; font-family: var(--wcop-font-body) !important; cursor: pointer !important; transition: all .2s !important; margin-top: 8px !important; }
.wcop-lookup-wrap .wcop-lookup-btn:hover { background: var(--wcop-primary-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(79,106,240,.3) !important; }

/* === TRACKING PAGE === */
.wcop-tracking-wrap { max-width: 880px !important; margin: 20px auto !important; padding: 0 16px !important; font-family: var(--wcop-font-body) !important; }
.wcop-tracking-wrap .wcop-tracking-header { text-align: center !important; margin-bottom: 28px !important; }
.wcop-tracking-wrap .wcop-order-label { font-family: var(--wcop-font-heading) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--wcop-gray-500) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 8px !important; }
.wcop-tracking-wrap .wcop-order-id { font-family: var(--wcop-font-heading) !important; font-size: 32px !important; font-weight: 800 !important; color: var(--wcop-gray-900) !important; margin-bottom: 14px !important; }
.wcop-tracking-wrap .wcop-current-pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 20px !important; background: var(--wcop-primary-light) !important; color: var(--wcop-primary) !important; border-radius: 100px !important; font-size: 14px !important; font-weight: 600 !important; }
.wcop-tracking-wrap .wcop-pulse-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--wcop-primary) !important; animation: wcop-pulse 2s infinite !important; }
@keyframes wcop-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

.wcop-tracking-wrap .wcop-est-card { background: #fff !important; border-radius: var(--wcop-radius) !important; box-shadow: var(--wcop-shadow) !important; border: 1px solid var(--wcop-gray-200) !important; padding: 20px 28px !important; text-align: center !important; margin-bottom: 24px !important; }
.wcop-tracking-wrap .wcop-est-label { font-size: 13px !important; color: var(--wcop-gray-500) !important; }
.wcop-tracking-wrap .wcop-est-date { font-family: var(--wcop-font-heading) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--wcop-primary) !important; margin-top: 4px !important; }
.wcop-tracking-wrap .wcop-est-card.wcop-delayed { border-color: var(--wcop-warning) !important; background: #FFFDF5 !important; }
.wcop-tracking-wrap .wcop-est-card.wcop-delayed .wcop-est-date { color: var(--wcop-warning) !important; }
.wcop-tracking-wrap .wcop-delay-msg { font-size: 13px !important; color: var(--wcop-gray-500) !important; margin: 10px 0 0 !important; line-height: 1.6 !important; }

/* === TIMELINE DESKTOP === */
.wcop-tracking-wrap .wcop-timeline-card { background: #fff !important; border-radius: var(--wcop-radius) !important; box-shadow: var(--wcop-shadow) !important; border: 1px solid var(--wcop-gray-200) !important; padding: 32px 28px !important; margin-bottom: 24px !important; }
.wcop-tracking-wrap .wcop-timeline-desktop { position: relative !important; }
.wcop-tracking-wrap .wcop-tl-lines { position: absolute !important; top: 20px !important; left: 0 !important; right: 0 !important; display: flex !important; z-index: 1 !important; padding: 0 calc(50%/var(--wcop-step-count,5)) !important; }
.wcop-tracking-wrap .wcop-tl-line { flex: 1 !important; height: 3px !important; border-radius: 2px !important; }
.wcop-tracking-wrap .wcop-tl-line.completed { background: var(--wcop-success) !important; }
.wcop-tracking-wrap .wcop-tl-line.active { background: linear-gradient(90deg,var(--wcop-success),var(--wcop-gray-200)) !important; }
.wcop-tracking-wrap .wcop-tl-line.pending { background: var(--wcop-gray-200) !important; }
.wcop-tracking-wrap .wcop-tl-steps { display: flex !important; justify-content: space-between !important; position: relative !important; z-index: 2 !important; }
.wcop-tracking-wrap .wcop-tl-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 !important; }
.wcop-tracking-wrap .wcop-tl-circle { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; flex-shrink: 0 !important; }
.wcop-tracking-wrap .wcop-tl-circle svg { width: 18px !important; height: 18px !important; }
.wcop-tracking-wrap .wcop-tl-circle.completed { background: var(--wcop-success) !important; color: #fff !important; }
.wcop-tracking-wrap .wcop-tl-circle.active { background: #fff !important; border: 3px solid var(--wcop-primary) !important; color: var(--wcop-primary) !important; box-shadow: 0 0 0 6px rgba(79,106,240,.12) !important; }
.wcop-tracking-wrap .wcop-tl-circle.pending { background: var(--wcop-gray-100) !important; border: 2px solid var(--wcop-gray-300) !important; color: var(--wcop-gray-400) !important; }
.wcop-tracking-wrap .wcop-tl-name { font-size: 13px !important; font-weight: 600 !important; color: var(--wcop-gray-700) !important; margin-bottom: 4px !important; max-width: 110px !important; }
.wcop-tracking-wrap .wcop-tl-name.pending { color: var(--wcop-gray-400) !important; }
.wcop-tracking-wrap .wcop-tl-date { font-size: 11px !important; color: var(--wcop-gray-400) !important; }

/* === TIMELINE MOBILE === */
.wcop-tracking-wrap .wcop-timeline-mobile { display: none !important; }

/* === GRID === */
.wcop-tracking-wrap .wcop-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; margin-bottom: 24px !important; }
.wcop-tracking-wrap .wcop-grid-card { background: #fff !important; border-radius: var(--wcop-radius) !important; box-shadow: var(--wcop-shadow) !important; border: 1px solid var(--wcop-gray-200) !important; padding: 24px !important; }
.wcop-tracking-wrap .wcop-grid-card h4 { font-family: var(--wcop-font-heading) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--wcop-gray-900) !important; margin: 0 0 16px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
.wcop-tracking-wrap .wcop-grid-card h4 svg { width: 18px !important; height: 18px !important; color: var(--wcop-gray-400) !important; }

.wcop-tracking-wrap .wcop-update-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.wcop-tracking-wrap .wcop-update-item { display: flex !important; gap: 12px !important; padding: 10px 0 !important; border-bottom: 1px solid var(--wcop-gray-100) !important; }
.wcop-tracking-wrap .wcop-update-item:last-child { border-bottom: none !important; }
.wcop-tracking-wrap .wcop-u-time { font-size: 12px !important; color: var(--wcop-gray-400) !important; min-width: 44px !important; flex-shrink: 0 !important; padding-top: 2px !important; font-variant-numeric: tabular-nums !important; }
.wcop-tracking-wrap .wcop-u-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-top: 6px !important; flex-shrink: 0 !important; }
.wcop-tracking-wrap .wcop-u-dot.active { background: var(--wcop-primary) !important; }
.wcop-tracking-wrap .wcop-u-dot.done { background: var(--wcop-success) !important; }
.wcop-tracking-wrap .wcop-u-content { flex: 1 !important; }
.wcop-tracking-wrap .wcop-u-status { font-size: 14px !important; font-weight: 600 !important; color: var(--wcop-gray-700) !important; }
.wcop-tracking-wrap .wcop-u-date { font-size: 12px !important; color: var(--wcop-gray-400) !important; margin-top: 2px !important; }

.wcop-tracking-wrap .wcop-item-card { display: flex !important; gap: 14px !important; padding: 14px !important; background: var(--wcop-gray-50) !important; border-radius: 8px !important; margin-bottom: 10px !important; }
.wcop-tracking-wrap .wcop-item-card:last-child { margin-bottom: 0 !important; }
.wcop-tracking-wrap .wcop-item-img { width: 64px !important; height: 64px !important; border-radius: 8px !important; background: var(--wcop-gray-200) !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; color: var(--wcop-gray-400) !important; }
.wcop-tracking-wrap .wcop-item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.wcop-tracking-wrap .wcop-item-details { flex: 1 !important; min-width: 0 !important; }
.wcop-tracking-wrap .wcop-item-name { font-size: 14px !important; font-weight: 600 !important; color: var(--wcop-gray-800) !important; }
.wcop-tracking-wrap .wcop-item-variant { font-size: 12px !important; color: var(--wcop-gray-500) !important; margin-top: 2px !important; }
.wcop-tracking-wrap .wcop-item-qty { font-size: 12px !important; color: var(--wcop-gray-400) !important; margin-top: 4px !important; }

.wcop-tracking-wrap .wcop-back-link { text-align: center !important; margin-bottom: 40px !important; }
.wcop-tracking-wrap .wcop-back-link a { font-size: 14px !important; color: var(--wcop-gray-500) !important; text-decoration: none !important; transition: color .2s !important; }
.wcop-tracking-wrap .wcop-back-link a:hover { color: var(--wcop-primary) !important; }

/* === MOBILE === */
@media(max-width:768px){
    .wcop-lookup-wrap .wcop-lookup-card { padding: 32px 24px !important; }
    .wcop-tracking-wrap .wcop-order-id { font-size: 24px !important; }
    .wcop-tracking-wrap .wcop-grid { grid-template-columns: 1fr !important; }
    .wcop-tracking-wrap .wcop-timeline-desktop { display: none !important; }
    .wcop-tracking-wrap .wcop-timeline-mobile { display: block !important; }
    .wcop-tracking-wrap .wcop-timeline-card { padding: 24px 20px !important; }
    .wcop-tracking-wrap .wcop-mtl-item { display: flex !important; gap: 16px !important; position: relative !important; padding-bottom: 24px !important; }
    .wcop-tracking-wrap .wcop-mtl-item:last-child { padding-bottom: 0 !important; }
    .wcop-tracking-wrap .wcop-mtl-item.has-line::before { content: '' !important; position: absolute !important; left: 19px !important; top: 42px !important; bottom: 0 !important; width: 2px !important; background: var(--wcop-gray-200) !important; }
    .wcop-tracking-wrap .wcop-mtl-item.completed.has-line::before { background: var(--wcop-success) !important; }
    .wcop-tracking-wrap .wcop-mtl-item.active.has-line::before { background: linear-gradient(180deg,var(--wcop-primary),var(--wcop-gray-200)) !important; }
    .wcop-tracking-wrap .wcop-mtl-circle { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; z-index: 2 !important; }
    .wcop-tracking-wrap .wcop-mtl-circle.completed { background: var(--wcop-success) !important; color: #fff !important; }
    .wcop-tracking-wrap .wcop-mtl-circle.active { background: #fff !important; border: 3px solid var(--wcop-primary) !important; color: var(--wcop-primary) !important; box-shadow: 0 0 0 6px rgba(79,106,240,.12) !important; }
    .wcop-tracking-wrap .wcop-mtl-circle.pending { background: var(--wcop-gray-100) !important; border: 2px solid var(--wcop-gray-300) !important; color: var(--wcop-gray-400) !important; }
    .wcop-tracking-wrap .wcop-mtl-info { flex: 1 !important; padding-top: 6px !important; }
    .wcop-tracking-wrap .wcop-mtl-info h5 { font-family: var(--wcop-font-heading) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--wcop-gray-800) !important; margin: 0 0 2px !important; }
    .wcop-tracking-wrap .wcop-mtl-info h5.pending { color: var(--wcop-gray-400) !important; }
    .wcop-tracking-wrap .wcop-mtl-date { font-size: 12px !important; color: var(--wcop-gray-400) !important; }
}
@media(max-width:480px){
    .wcop-tracking-wrap { padding: 0 12px !important; }
    .wcop-tracking-wrap .wcop-est-card { padding: 16px 20px !important; }
    .wcop-tracking-wrap .wcop-grid-card { padding: 18px !important; }
}

/* ============================================
   THEME OVERRIDE — WoodMart / Astra / OceanWP / etc.
   Extra-high specificity to beat aggressive theme selectors
   like :is(.btn, button, [type="submit"]) and input[type="*"]
   ============================================ */

/* Button: beat WoodMart :is(.btn, .button, button, [type="submit"]) */
.wcop-lookup-wrap .wcop-lookup-card button.wcop-lookup-btn,
.wcop-lookup-wrap .wcop-lookup-card .wcop-lookup-btn,
.wcop-lookup-wrap button[type="submit"].wcop-lookup-btn,
body .wcop-lookup-wrap .wcop-lookup-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px !important;
    background: var(--wcop-primary) !important;
    background-color: var(--wcop-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--wcop-font-body) !important;
    cursor: pointer !important;
    transition: all .2s !important;
    margin-top: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wcop-lookup-wrap .wcop-lookup-card button.wcop-lookup-btn:hover,
.wcop-lookup-wrap .wcop-lookup-card .wcop-lookup-btn:hover,
body .wcop-lookup-wrap .wcop-lookup-btn:hover {
    background: var(--wcop-primary-dark) !important;
    background-color: var(--wcop-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(79,106,240,.3) !important;
}

/* Inputs: beat WoodMart input[type="text"], input[type="email"] selectors */
.wcop-lookup-wrap .wcop-lookup-card input.wcop-form-input,
.wcop-lookup-wrap .wcop-lookup-card .wcop-form-input,
.wcop-lookup-wrap input[type="text"].wcop-form-input,
.wcop-lookup-wrap input[type="email"].wcop-form-input,
body .wcop-lookup-wrap .wcop-form-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid var(--wcop-gray-200) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: var(--wcop-font-body) !important;
    color: var(--wcop-gray-800) !important;
    background: #fff !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: unset !important;
    max-width: 100% !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: all .2s !important;
    outline: none !important;
}

.wcop-lookup-wrap .wcop-lookup-card input.wcop-form-input:focus,
.wcop-lookup-wrap input[type="text"].wcop-form-input:focus,
.wcop-lookup-wrap input[type="email"].wcop-form-input:focus,
body .wcop-lookup-wrap .wcop-form-input:focus {
    border-color: var(--wcop-primary) !important;
    box-shadow: 0 0 0 3px rgba(79,106,240,.12) !important;
    outline: none !important;
    background: #fff !important;
}

.wcop-lookup-wrap .wcop-lookup-card input.wcop-form-input::placeholder,
body .wcop-lookup-wrap .wcop-form-input::placeholder {
    color: var(--wcop-gray-400) !important;
    opacity: 1 !important;
}

/* Labels: beat theme label resets */
.wcop-lookup-wrap .wcop-lookup-card .wcop-form-group label,
body .wcop-lookup-wrap .wcop-form-group label {
    display: block !important;
    font-family: var(--wcop-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--wcop-gray-700) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* H2: beat theme heading overrides */
.wcop-lookup-wrap .wcop-lookup-card h2,
body .wcop-lookup-wrap h2 {
    font-family: var(--wcop-font-heading) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--wcop-gray-900) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    background: none !important;
}

/* Tracking page headings */
.wcop-tracking-wrap .wcop-grid-card h4,
body .wcop-tracking-wrap h4 {
    font-family: var(--wcop-font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--wcop-gray-900) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
    background: none !important;
}

/* SVG inside button — prevent theme icon overrides */
.wcop-lookup-wrap .wcop-lookup-btn svg,
.wcop-tracking-wrap svg {
    fill: none !important;
    max-width: none !important;
    max-height: none !important;
}