/*!
 * WC Pathao Tracker Pro — Frontend Styles
 * Author: Rafiul Islam | pixelfave.com
 */
.wcpt*,.wcpt *::before,.wcpt *::after{box-sizing:border-box;margin:0;padding:0}
.wcpt{
    --brand:#4f46e5;--brand-d:#3730a3;--brand-l:#e0e7ff;
    --ok:#059669;--ok-l:#d1fae5;--warn:#d97706;--warn-l:#fef3c7;
    --err:#dc2626;--err-l:#fee2e2;
    --g50:#f8fafc;--g100:#f1f5f9;--g200:#e2e8f0;--g300:#cbd5e1;
    --g500:#64748b;--g700:#374151;--g900:#0f172a;
    --radius:14px;--shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-family:var(--font);font-size:15px;line-height:1.5;color:var(--g900);
    max-width:580px;margin:40px auto;
}
/* Card */
#wcpt-root{background:#fff;border:1px solid var(--g200);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
/* Header */
.wcpt__header{background:linear-gradient(135deg,var(--brand),#7c3aed);padding:28px 28px 22px;text-align:center;color:#fff}
.wcpt__header-icon{font-size:44px;display:block;margin-bottom:10px}
.wcpt__title{font-size:22px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.3px}
.wcpt__subtitle{font-size:13px;color:rgba(255,255,255,.75)}
/* Tabs */
.wcpt__tabs{display:flex;background:var(--g50);border-bottom:1.5px solid var(--g200)}
.wcpt__tab{flex:1;padding:12px 6px;font-size:12.5px;font-weight:500;font-family:var(--font);border:none;background:none;cursor:pointer;color:var(--g500);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .2s,border-color .2s}
.wcpt__tab:hover{color:var(--brand)}
.wcpt__tab--active{color:var(--brand);border-bottom-color:var(--brand);font-weight:700;background:#fff}
/* Body + Fields */
.wcpt__body{padding:20px 22px 22px}
.wcpt__pane{display:none;flex-direction:column;gap:14px}
.wcpt__pane--active{display:flex}
.wcpt__field{display:flex;flex-direction:column;gap:5px}
.wcpt__label{font-size:11.5px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.07em}
.wcpt__input-wrap{position:relative;display:flex;align-items:center}
.wcpt__input-icon{position:absolute;left:13px;font-size:16px;color:var(--g500);pointer-events:none}
.wcpt__input{width:100%;padding:11px 14px 11px 42px;border:1.5px solid var(--g300);border-radius:10px;font-size:15px;font-family:var(--font);background:var(--g50);color:var(--g900);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none}
.wcpt__input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.13);background:#fff}
.wcpt__input::placeholder{color:var(--g300)}
/* Button */
.wcpt__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:14px;background:linear-gradient(135deg,var(--brand),#7c3aed);color:#fff;border:none;border-radius:10px;font-size:15.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity .2s,transform .12s,box-shadow .2s;box-shadow:0 4px 18px rgba(79,70,229,.38)}
.wcpt__btn:hover{opacity:.93;box-shadow:0 6px 24px rgba(79,70,229,.44)}
.wcpt__btn:active{transform:scale(.98)}
.wcpt__btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.wcpt__spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:wcpt-spin .8s linear infinite}
.wcpt__btn--loading .wcpt__spinner{display:block}
.wcpt__btn--loading .wcpt__btn-icon{display:none}
@keyframes wcpt-spin{to{transform:rotate(360deg)}}
/* Result */
.wcpt__result{display:none;border-top:1.5px solid var(--g100)}
.wcpt__card--result{border:none;border-radius:0;box-shadow:none}
/* Status Hero */
.wcpt__hero{padding:18px 22px;text-align:center}
.wcpt__hero--courier{background:linear-gradient(135deg,#065f46,#047857);color:#fff}
.wcpt__hero--store{background:linear-gradient(135deg,var(--brand-d),var(--brand));color:#fff}
.wcpt__hero-status{font-size:20px;font-weight:800;letter-spacing:-.3px;text-transform:uppercase}
.wcpt__hero-label{font-size:12px;opacity:.8;margin-top:4px}
/* Info grid */
.wcpt__summary{border-bottom:1.5px solid var(--g100)}
.wcpt__info-grid{display:grid;grid-template-columns:1fr 1fr}
.wcpt__info-cell{display:flex;flex-direction:column;padding:10px 18px;border-bottom:1px solid var(--g100);border-right:1px solid var(--g100);font-size:13px}
.wcpt__info-cell:nth-child(even){border-right:none}
.wcpt__info-label{font-size:10.5px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.wcpt__info-value{font-weight:600;color:var(--g700)}
.wcpt__tracking-chip{display:inline-block;background:var(--brand-l);color:var(--brand-d);padding:1px 8px;border-radius:6px;font-family:monospace;font-size:12px;font-weight:700}
/* Strips */
.wcpt__strip{padding:9px 18px;font-size:12.5px;font-weight:500;border-bottom:1px solid transparent}
.wcpt__strip--ok{background:var(--ok-l);color:#065f46;border-color:#a7f3d0}
.wcpt__strip--warn{background:var(--warn-l);color:#92400e;border-color:#fde68a}
.wcpt__strip--info{background:var(--brand-l);color:var(--brand-d);border-color:#c7d2fe}
/* All orders (logged-in) */
.wcpt__orders-list{padding:12px 18px}
.wcpt__orders-list h4{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.wcpt__order-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--g100);font-size:13px}
.wcpt__order-row:last-child{border-bottom:none}
/* Timeline */
.wcpt__timeline{padding:20px 18px 16px}
.wcpt__timeline-title{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--g100)}
.wcpt__section-divider{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--g500);padding:3px 10px;border-radius:10px;display:inline-block;margin:8px 0 14px}
.wcpt__section-divider--courier{background:var(--brand)}
/* Steps */
.wcpt__step{display:grid;grid-template-columns:32px 1fr;gap:0 12px;position:relative;padding-bottom:0;align-items:flex-start}
.wcpt__connector{position:absolute;left:15px;top:34px;bottom:0;width:2px;z-index:0;min-height:28px}
.wcpt__step--done .wcpt__connector{background:var(--ok)}
.wcpt__step--active .wcpt__connector{background:linear-gradient(to bottom,var(--brand),var(--g200))}
.wcpt__step--pending .wcpt__connector,.wcpt__step--negative .wcpt__connector{background:var(--g200)}
.wcpt__step--last .wcpt__connector{display:none}
.wcpt__node{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;flex-shrink:0;transition:transform .2s}
.wcpt__step--done .wcpt__node{background:var(--ok);color:#fff;box-shadow:0 0 0 3px var(--ok-l)}
.wcpt__step--active .wcpt__node{background:var(--brand);box-shadow:0 0 0 4px rgba(79,70,229,.2)}
.wcpt__step--pending .wcpt__node{background:var(--g100);border:2px solid var(--g200)}
.wcpt__step--negative .wcpt__node{background:var(--err-l);border:2px solid #fecaca}
.wcpt__node-check{width:16px;height:16px}
.wcpt__node-x{font-size:12px;font-weight:800;color:var(--err)}
.wcpt__dot{width:10px;height:10px;border-radius:50%;background:var(--g300)}
.wcpt__pulse{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.9);animation:wcpt-pulse 1.8s ease-in-out infinite}
@keyframes wcpt-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.wcpt__step-body{padding:4px 0 24px}
.wcpt__step--last .wcpt__step-body{padding-bottom:4px}
.wcpt__step-label{font-size:14px;font-weight:600;color:var(--g700)}
.wcpt__step--pending .wcpt__step-label{color:var(--g300);font-weight:400}
.wcpt__step--active .wcpt__step-label{color:var(--brand);font-weight:700}
.wcpt__step--negative .wcpt__step-label{color:var(--err)}
.wcpt__step-time{font-size:11.5px;color:var(--g500);margin-top:3px}
.wcpt__step--active .wcpt__step-time{color:var(--brand)}
/* Error */
.wcpt__error{display:flex;align-items:flex-start;gap:12px;margin:14px 0 4px;padding:14px 16px;background:var(--err-l);border:1px solid #fecaca;border-left:4px solid var(--err);border-radius:10px;font-size:14px;color:#991b1b;line-height:1.5}
.wcpt__error-ico{font-size:20px;flex-shrink:0;margin-top:1px}
.wcpt__wa-banner{padding:13px 18px;background:var(--ok-l);border-top:1px solid #a7f3d0;font-size:13px;font-weight:600;color:#065f46;text-align:center}
.wcpt__branding{text-align:center;padding:10px;font-size:11px;color:var(--g500)}
.wcpt__branding a{color:var(--g500);text-decoration:none}
/* Responsive */
@media(max-width:520px){
    .wcpt{margin:16px 8px}
    .wcpt__header{padding:20px 16px 16px}
    .wcpt__body{padding:16px 14px 18px}
    .wcpt__tab{font-size:11px;padding:10px 3px}
    .wcpt__info-grid{grid-template-columns:1fr}
    .wcpt__info-cell{border-right:none}
    .wcpt__timeline{padding:14px 12px 10px}
    .wcpt__hero-status{font-size:17px}
}