/* Packlink Tracking Bridge v2 — Frontend CSS */

:root {
    --ptb-blue:      #002868;
    --ptb-green:     #1a7f4b;
    --ptb-amber:     #b45309;
    --ptb-red:       #b91c1c;
    --ptb-gray-50:   #F7F6F3;
    --ptb-gray-100:  #E8E5DF;
    --ptb-gray-500:  #6B6B72;
    --ptb-gray-900:  #1A1A2E;
    --ptb-radius:    10px;
    --ptb-shadow:    0 2px 16px rgba(0,40,104,.08);
}

/* ── Widget ── */
.ptb-widget {
    background: #fff;
    border: 1px solid var(--ptb-gray-100);
    border-radius: var(--ptb-radius);
    padding: 24px 28px;
    margin: 28px 0;
    box-shadow: var(--ptb-shadow);
}

/* ── Header ── */
.ptb-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ptb-icon {
    width: 44px;
    height: 44px;
    background: var(--ptb-blue);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.ptb-icon svg { width: 24px; height: 24px; }

.ptb-title-group { flex: 1; min-width: 0; }

.ptb-title-group h3 {
    margin: 0 0 2px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ptb-gray-900) !important;
    border: none !important;
}

.ptb-ref { font-size: 12px; color: var(--ptb-gray-500); }

/* ── Badges ── */
.ptb-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

.ptb-status--pending   { background:#F7F6F3; color:var(--ptb-gray-500); border:1px solid var(--ptb-gray-100); }
.ptb-status--confirmed { background:#EFF6FF; color:var(--ptb-blue);     border:1px solid #BFDBFE; }
.ptb-status--transit   { background:#FFFBEB; color:var(--ptb-amber);    border:1px solid #FDE68A; }
.ptb-status--delivered { background:#ECFDF5; color:var(--ptb-green);    border:1px solid #A7F3D0; }
.ptb-status--error     { background:#FEF2F2; color:var(--ptb-red);      border:1px solid #FECACA; }

/* ── Stepper ── */
.ptb-stepper {
    display: flex;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 4px 0;
    overflow-x: auto;
}

.ptb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    position: relative;
}

.ptb-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ptb-gray-50);
    border: 2px solid var(--ptb-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    position: relative;
    z-index: 1;
    transition: all .2s ease;
    opacity: .45;
}

.ptb-step--done .ptb-dot  { background:#EFF6FF; border-color:var(--ptb-blue); opacity:1; }
.ptb-step--active .ptb-dot { background:var(--ptb-blue); border-color:var(--ptb-blue); opacity:1; box-shadow:0 0 0 4px rgba(0,40,104,.12); filter:brightness(0) invert(1) brightness(10); }

/* Fix: emoji inside active dot — don't invert emoji */
.ptb-step--active .ptb-dot span { filter: brightness(0) invert(1); }

.ptb-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ptb-gray-500);
    margin-top: 7px;
    text-align: center;
    letter-spacing: .1px;
}

.ptb-step--done .ptb-step-label,
.ptb-step--active .ptb-step-label { color: var(--ptb-blue); }

/* Connector line */
.ptb-line {
    position: absolute;
    top: 18px;
    left: calc(50% + 19px);
    right: calc(-50% + 19px);
    height: 2px;
    background: var(--ptb-gray-100);
    z-index: 0;
}
.ptb-line--done { background: var(--ptb-blue); }

/* ── Tracking codes ── */
.ptb-codes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    background: var(--ptb-gray-50);
    border-radius: 8px;
    border: 1px solid var(--ptb-gray-100);
    margin-bottom: 18px;
}

.ptb-codes-label { font-size: 13px; color: var(--ptb-gray-500); font-weight: 500; }

.ptb-code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    background: #fff;
    border: 1px solid var(--ptb-gray-100);
    border-radius: 6px;
    padding: 5px 12px;
    color: var(--ptb-gray-900);
}

.ptb-code--link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ptb-blue) !important;
    text-decoration: none !important;
    transition: all .2s;
}
.ptb-code--link:hover { background: #EFF6FF; border-color: var(--ptb-blue); }

/* ── CTA ── */
.ptb-cta { margin-top: 4px; }

.ptb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ptb-blue);
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s, transform .15s;
}
.ptb-btn svg { width: 15px; height: 15px; }
.ptb-btn:hover { background: #1a3f80; transform: translateY(-1px); color: #fff !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ptb-widget { padding: 18px 16px; }
    .ptb-dot { width: 32px; height: 32px; font-size: 13px; }
    .ptb-line { top: 15px; left: calc(50% + 16px); right: calc(-50% + 16px); }
    .ptb-btn { width: 100%; justify-content: center; }
}