/* ============================================================
   Chit Chats — Public Tracker Widget
   Brand Developers | https://branddevelopers.ca
   ============================================================ */

.cc-tracker {
    --cc-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cc-border:  #e2e2e2;
    --cc-bg:      #f7f7f7;
    --cc-text:    #1a1a1a;
    --cc-muted:   #888;
    --cc-green:   #4caf50;
    --cc-blue:    #2563eb;
    font-family:  var(--cc-font);
    max-width:    780px;
    color:        var(--cc-text);
    font-size:    15px;
    line-height:  1.5;
}

/* ── Search form ─────────────────────────────────────────── */
.cc-tracker__form {
    display:       flex;
    gap:           8px;
    margin-bottom: 0;
}

.cc-tracker__input {
    flex:          1;
    padding:       12px 16px;
    border:        1px solid var(--cc-border);
    border-radius: 4px;
    font-size:     15px;
    font-family:   var(--cc-font);
    outline:       none;
    transition:    border-color .15s;
}
.cc-tracker__input:focus { border-color: #555; }

.cc-tracker__btn {
    padding:       12px 28px;
    background:    #1a1a1a;
    color:         #fff;
    border:        none;
    border-radius: 4px;
    font-size:     15px;
    font-family:   var(--cc-font);
    font-weight:   700;
    letter-spacing:.04em;
    cursor:        pointer;
    text-transform:uppercase;
    transition:    background .15s;
    white-space:   nowrap;
}
.cc-tracker__btn:hover    { background: #333; }
.cc-tracker__btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Result area ─────────────────────────────────────────── */
.cc-tracker__result { margin-top: 24px; }

/* ── Tracking ID heading + back link ─────────────────────── */
.cc-result__heading {
    font-size:   26px;
    font-weight: 700;
    margin:      0 0 6px;
}

.cc-result__back {
    display:     inline-block;
    color:       #c0392b;
    text-decoration: underline;
    font-size:   14px;
    cursor:      pointer;
    margin-bottom: 20px;
    background:  none;
    border:      none;
    padding:     0;
    font-family: var(--cc-font);
}
.cc-result__back:hover { color: #922b21; }

/* ── Info notice ─────────────────────────────────────────── */
.cc-result__notice {
    border:        1px solid var(--cc-border);
    border-radius: 4px;
    padding:       18px 20px;
    margin-bottom: 16px;
    font-size:     14px;
    color:         #444;
    line-height:   1.6;
    background:    #fafafa;
}
.cc-result__notice p { margin: 0 0 6px; }
.cc-result__notice p:last-child { margin: 0; }

/* ── Status card ─────────────────────────────────────────── */
.cc-result__status-card {
    border:        1px solid var(--cc-border);
    border-radius: 4px;
    padding:       24px;
    margin-bottom: 24px;
    background:    #fff;
}

.cc-result__status-cols {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         20px;
}
@media (max-width: 540px) {
    .cc-result__status-cols { grid-template-columns: 1fr; }
}

.cc-result__col-title  { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.cc-result__col-date   { font-size: 13px; color: var(--cc-muted); margin-bottom: 3px; }
.cc-result__col-value  { font-size: 14px; font-weight: 600; }
.cc-result__col-sub    { font-size: 13px; color: var(--cc-muted); }
.cc-result__col--right { text-align: right; }

/* ── Progress bar ────────────────────────────────────────── */
.cc-result__progress-wrap {
    position:      relative;
    height:        18px;
    margin-bottom: 6px;
}
.cc-result__progress-track {
    position:      absolute;
    top:           50%; left: 0; right: 0;
    height:        8px;
    background:    #e0e0e0;
    border-radius: 4px;
    transform:     translateY(-50%);
}
.cc-result__progress-fill {
    height:        100%;
    background:    var(--cc-green);
    border-radius: 4px;
    transition:    width .5s ease;
}
.cc-result__progress-dot {
    position:   absolute;
    top:        50%;
    transform:  translate(-50%, -50%);
    width:      18px;
    height:     18px;
    background: var(--cc-green);
    border:     3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cc-green);
}
.cc-result__progress-label {
    text-align:  right;
    font-size:   13px;
    font-weight: 700;
}

/* ── Service + Package ───────────────────────────────────── */
.cc-result__meta-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         24px;
}
@media (max-width: 540px) {
    .cc-result__meta-row { grid-template-columns: 1fr; }
}
.cc-result__meta-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.cc-result__meta-value { font-size: 14px; color: #444; margin-bottom: 4px; }
.cc-result__meta-value strong { color: var(--cc-text); font-weight: 600; }

/* ── Partnered with the best box ─────────────────────────── */
.cc-result__partners {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           20px;
    border:        1px solid var(--cc-border);
    border-radius: 4px;
    padding:       24px;
    margin-bottom: 16px;
    background:    #fff;
}
.cc-result__partners-text h4 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.cc-result__partners-text p  { font-size: 14px; color: #555; margin: 0; }
.cc-result__partners-svg { flex-shrink: 0; }
.cc-result__partners-svg img { display: block; }

/* ── Carrier alert box ───────────────────────────────────── */
.cc-result__alert {
    display:       flex;
    gap:           14px;
    align-items:   flex-start;
    border:        1px solid var(--cc-border);
    border-radius: 4px;
    padding:       18px 20px;
    margin-bottom: 24px;
    background:    #fff;
    font-size:     14px;
}
.cc-result__alert-icon { font-size: 28px; flex-shrink: 0; }
.cc-result__alert-body strong { font-size: 16px; color: #c0392b; }
.cc-result__alert-body p { margin: 4px 0 0; color: #555; }

/* ── Tracking history ────────────────────────────────────── */
.cc-result__history-title {
    font-size:   20px;
    font-weight: 700;
    margin:      0 0 0;
}
.cc-result__history-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        14px;
    margin-top:       4px;
}
.cc-result__history-table td {
    padding:       12px 8px;
    border-top:    1px solid var(--cc-border);
    vertical-align: top;
}
.cc-result__td-date  { color: var(--cc-text); font-weight: 600; white-space: nowrap; width: 110px; }
.cc-result__td-time  { color: var(--cc-muted); white-space: nowrap; width: 80px; }
.cc-result__td-event { color: var(--cc-text); }
.cc-result__td-sub   { font-size: 12px; color: var(--cc-muted); display: block; margin-top: 2px; }
.cc-result__td-loc   { color: var(--cc-muted); text-align: right; white-space: nowrap; }

/* ── States ──────────────────────────────────────────────── */
.cc-tracker__loading { color: var(--cc-muted); font-style: italic; padding: 16px 0; }
.cc-tracker__error   { color: #c0392b; padding: 16px 0; }

/* ── Summary card (step 1) ───────────────────────────────── */
.cc-summary-card {
    display:        flex;
    align-items:    center;
    gap:            16px;
    border:         1px solid var(--cc-border);
    border-radius:  6px;
    padding:        20px;
    margin-top:     16px;
    background:     #fff;
    cursor:         pointer;
    transition:     box-shadow .15s, border-color .15s;
}
.cc-summary-card:hover {
    box-shadow:     0 4px 16px rgba(0,0,0,.08);
    border-color:   #aaa;
}

.cc-summary-card__icon { flex-shrink: 0; }

.cc-summary-card__body { flex: 1; }

.cc-summary-card__id {
    font-weight:  700;
    font-size:    15px;
    margin-bottom: 4px;
    color:        var(--cc-text);
}

.cc-summary-card__badge {
    display:       inline-block;
    padding:       3px 12px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   700;
    margin-bottom: 4px;
}
.cc-summary-card__badge--delivered { background: #dcfce7; color: #166534; }
.cc-summary-card__badge--transit   { background: #dbeafe; color: #1e40af; }

.cc-summary-card__loc {
    font-size: 13px;
    color:     var(--cc-muted);
    margin-top: 3px;
}

.cc-summary-card__arrow {
    font-size:  24px;
    color:      #ccc;
    flex-shrink: 0;
}

.cc-summary-card__hint {
    font-size:  13px;
    color:      var(--cc-muted);
    margin:     8px 0 0;
    font-style: italic;
}