/* ═══════════════════════════════════════════════════════════════════
   UPS Live Tracking — Map + Timeline styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Button ─────────────────────────────────────────────────────── */
.ups-live-track-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    margin-top:      12px;
    padding:         8px 18px;
    background:      #2271b1;
    color:           #fff !important;
    border:          none;
    border-radius:   4px;
    cursor:          pointer;
    font-size:       13px;
    font-weight:     600;
    line-height:     1.4;
    text-decoration: none !important;
    transition:      background 0.2s, opacity 0.2s;
}
.ups-live-track-btn::before {
    content: '🗺';
    font-size: 14px;
}
.ups-live-track-btn:hover   { background: #1a5a8f; }
.ups-live-track-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* ── Map wrapper (hidden until button clicked) ────────────────────── */
.ups-track-map-wrap {
    display:       none;
    margin-top:    16px;
    border:        1px solid #dde3ea;
    border-radius: 6px;
    overflow:      hidden;
    background:    #fff;
    box-shadow:    0 2px 8px rgba(0,0,0,0.07);
}

/* ── Loading spinner ─────────────────────────────────────────────── */
.ups-track-spinner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    height:          80px;
    color:           #555;
    font-size:       14px;
}
.ups-track-spinner::before {
    content:       '';
    width:         22px;
    height:        22px;
    border:        3px solid #dde3ea;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation:     ups-spin 0.75s linear infinite;
    flex-shrink:   0;
}
@keyframes ups-spin { to { transform: rotate(360deg); } }

/* ── Map canvas ──────────────────────────────────────────────────── */
.ups-track-map {
    display: none;    /* shown by JS after geocoding */
    width:   100%;
    height:  400px;
}

/* ── Google Maps info window ─────────────────────────────────────── */
.ups-map-info {
    font-size:   13px;
    line-height: 1.55;
    min-width:   160px;
    max-width:   240px;
    color:       #333;
}
.ups-map-info strong { color: #1a1a1a; }
.ups-map-info-time   { color: #888; font-size: 12px; }

/* ── Legend ──────────────────────────────────────────────────────── */
.ups-map-legend {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px 20px;
    padding:     10px 16px;
    background:  #f7f9fc;
    border-top:  1px solid #eee;
    font-size:   12px;
    color:       #555;
}
.ups-map-legend-item {
    display:     flex;
    align-items: center;
    gap:         6px;
}
.ups-map-legend-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        2px solid #fff;
    box-shadow:    0 0 0 1px #aaa;
    flex-shrink:   0;
}

/* ── Activity timeline ───────────────────────────────────────────── */
.ups-track-timeline {
    display:    none;    /* shown by JS */
    padding:    20px 24px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.ups-tl-inner {
    position:    relative;
    padding-left: 26px;
}
.ups-tl-inner::before {           /* vertical connector line */
    content:    '';
    position:   absolute;
    left:       6px;
    top:        6px;
    bottom:     6px;
    width:      2px;
    background: #e0e6ee;
}

.ups-tl-item {
    position:      relative;
    padding-bottom: 18px;
}
.ups-tl-item:last-child { padding-bottom: 0; }

.ups-tl-dot {
    position:      absolute;
    left:          -20px;
    top:           4px;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    border:        2px solid #fff;
    box-shadow:    0 0 0 1px #ccc;
}
.ups-tl-item--latest .ups-tl-dot {
    width:      13px;
    height:     13px;
    left:       -22px;
    top:        2px;
    box-shadow: 0 0 0 1px #e67e22, 0 0 10px rgba(230,126,34,0.35);
}

.ups-tl-badge {
    display:        inline-block;
    padding:        1px 8px;
    border-radius:  10px;
    color:          #fff;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-right:   4px;
}

.ups-tl-desc {
    font-size:   13px;
    font-weight: 600;
    color:       #222;
}

.ups-tl-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px 16px;
    margin-top: 4px;
    font-size:  12px;
    color:      #777;
}
.ups-tl-loc::before { content: ''; }
.ups-tl-time        { white-space: nowrap; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ups-track-map { height: 280px; }
}

/* ════════════════════════════════════════════════════════════════════
   New timeline design — track order page
   ════════════════════════════════════════════════════════════════════ */

/* ── Delivery confirmation box ───────────────────────────────────── */
.amge-tl-delivery-box {
    margin:        0 0 16px;
    padding:       14px 16px;
    background:    #f0fdf4;
    border:        1px solid #bbf7d0;
    border-radius: 8px;
}
.amge-tl-delivery-title {
    font-weight:   700;
    font-size:     13px;
    color:         #15803d;
    margin-bottom: 8px;
}
.amge-tl-delivery-table {
    font-size:       13px;
    color:           #374151;
    border-collapse: collapse;
    width:           100%;
}
.amge-tl-delivery-table td { padding: 2px 10px 2px 0; }
.amge-tl-delivery-table td:first-child { color: #6b7280; white-space: nowrap; }
.amge-tl-delivery-table td:last-child  { font-weight: 600; }
.amge-tl-cod-badge {
    background:    #fef3c7;
    color:         #92400e;
    padding:       1px 8px;
    border-radius: 4px;
    font-size:     12px;
    font-weight:   600;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.amge-tl-empty {
    padding:   12px 0;
    color:     #6b7280;
    font-size: 13px;
    margin:    0;
}

/* ── Timeline wrapper ────────────────────────────────────────────── */
.amge-tl-wrap { padding-top: 4px; }

/* ── Individual item ─────────────────────────────────────────────── */
.amge-tl-item {
    position:       relative;
    padding-left:   36px;
    padding-bottom: 24px;
}
.amge-tl-item:last-child { padding-bottom: 0; }

/* Vertical connecting line */
.amge-tl-item--done::before {
    content:    '';
    position:   absolute;
    left:       11px;
    top:        24px;
    bottom:     0;
    width:      2px;
    background: #4ade80;
}

/* ── Circle ──────────────────────────────────────────────────────── */
.amge-tl-circle {
    position:        absolute;
    left:            0;
    top:             2px;
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      #e5e7eb;
    border:          3px solid #fff;
    box-shadow:      0 0 0 1px #d1d5db;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         2;
}
.amge-tl-circle--done {
    background: #4ade80;
    box-shadow: 0 0 0 1px #4ade80;
}

/* ── Row layout ──────────────────────────────────────────────────── */
.amge-tl-row {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
}
.amge-tl-left { flex: 1; min-width: 0; }

/* ── Text ────────────────────────────────────────────────────────── */
.amge-tl-title {
    font-weight: 700;
    font-size:   14px;
    color:       #111827;
    line-height: 1.4;
    margin:      0;
}
.amge-tl-title--pending { font-weight: 500; color: #6b7280; }
.amge-tl-loc {
    font-size: 13px;
    color:     #6b7280;
    margin:    2px 0 0;
}

/* ── Date/time column ────────────────────────────────────────────── */
.amge-tl-time-col {
    flex-shrink: 0;
    text-align:  right;
    font-size:   13px;
    color:       #6b7280;
    min-width:   84px;
}
.amge-tl-time-col p { margin: 0; line-height: 1.5; }

@media (max-width: 480px) {
    .amge-tl-row      { flex-direction: column; gap: 4px; }
    .amge-tl-time-col { text-align: left; }
}