/* Courier Tracker – GeneratePress-aligned styles */

/* ========================================
   Base / Tracker Widget
   ======================================== */

.ct-tracker {
    max-width: 620px;
    margin: 0 auto;
    font-family: inherit;
    color: #222;
    line-height: 1.6;
}

/* Form */
.ct-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ct-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #575760;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ========================================
   Step 1: Carrier Picker
   ======================================== */

.ct-carrier-picker {
    position: relative;
}

.ct-carrier-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    color: #222;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.ct-carrier-input:focus {
    border-color: #1e73be;
    box-shadow: 0 0 0 2px rgba(30, 115, 190, 0.15);
}

.ct-carrier-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 2px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ct-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.ct-dropdown-item:last-child {
    border-bottom: none;
}

.ct-dropdown-item:hover {
    background: #f0f6fc;
    color: #1e73be;
}

.ct-skip-carrier {
    display: block;
    margin-top: 12px;
    background: none;
    border: none;
    color: #999;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.ct-skip-carrier:hover {
    color: #1e73be;
}

/* ========================================
   Step 2: Tracking Input
   ======================================== */

.ct-step-tracking {
    display: none;
}

.ct-step-tracking.ct-step-active {
    display: block;
}

.ct-selected-carrier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f6fc;
    border: 1px solid #c5ddf0;
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 16px;
}

.ct-selected-carrier span {
    font-size: 14px;
    font-weight: 600;
    color: #1e73be;
}

.ct-change-carrier {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.ct-change-carrier:hover {
    color: #1e73be;
}

.ct-tracking-row {
    display: flex;
    gap: 10px;
}

#ct-tracking-input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    color: #222;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

#ct-tracking-input:focus {
    border-color: #1e73be;
    box-shadow: 0 0 0 2px rgba(30, 115, 190, 0.15);
}

.ct-btn {
    padding: 11px 28px;
    background: #55555e;
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.ct-btn:hover {
    background: #3f4047;
}

.ct-btn:disabled {
    background: #a0a0a6;
    cursor: not-allowed;
}

/* ========================================
   Results Card
   ======================================== */

.ct-results {
    margin-top: 24px;
}

.ct-result-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Status Header */
.ct-status-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ct-status-badge {
    padding: 5px 16px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.ct-carrier-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    opacity: 0.9;
}

/* Status Colors */
.ct-status-delivered { background: #16a34a; color: #fff; }
.ct-status-delivered .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-transit { background: #1e73be; color: #fff; }
.ct-status-transit .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-pickup { background: #6d28d9; color: #fff; }
.ct-status-pickup .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-exception,
.ct-status-undelivered { background: #dc2626; color: #fff; }
.ct-status-exception .ct-status-badge,
.ct-status-undelivered .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-expired { background: #6b7280; color: #fff; }
.ct-status-expired .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-info,
.ct-status-pending { background: #d97706; color: #fff; }
.ct-status-info .ct-status-badge,
.ct-status-pending .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

.ct-status-unknown { background: #6b7280; color: #fff; }
.ct-status-unknown .ct-status-badge { background: rgba(255,255,255,0.2); color: #fff; }

/* Summary */
.ct-summary {
    padding: 18px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    border-bottom: 1px solid #eee;
}

.ct-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-summary-item strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
}

.ct-summary-item span {
    font-size: 14px;
    color: #222;
    font-weight: 500;
}

.ct-cache-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

/* Timeline */
.ct-timeline {
    padding: 22px 24px;
}

.ct-timeline h3 {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 16px 0;
}

.ct-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.ct-timeline-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e0e0e0;
}

.ct-timeline-item {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    position: relative;
}

.ct-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ccc;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #e0e0e0;
    flex-shrink: 0;
    margin-top: 2px;
    z-index: 1;
}

.ct-timeline-first .ct-timeline-dot {
    background: #1e73be;
    box-shadow: 0 0 0 2px #1e73be;
}

.ct-timeline-content {
    flex: 1;
    min-width: 0;
}

.ct-timeline-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}

.ct-timeline-detail {
    font-size: 14px;
    color: #222;
    line-height: 1.5;
}

.ct-timeline-location {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

/* ========================================
   Fallback Card
   ======================================== */

.ct-fallback-card {
    background: #fffbeb;
    border: 1px solid #f5dfa0;
    border-radius: 6px;
    padding: 32px;
    text-align: center;
}

.ct-fallback-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.ct-fallback-msg {
    font-size: 15px;
    color: #7c5e10;
    margin: 0 0 20px 0;
    font-family: inherit;
}

.ct-official-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #55555e;
    color: #fff;
    text-decoration: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.2s;
}

.ct-official-btn:hover {
    background: #3f4047;
    color: #fff;
}

/* Error Card */
.ct-error-card {
    background: #fef2f2;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
}

.ct-error-card p {
    color: #991b1b;
    font-size: 14px;
    margin: 0;
}

/* ========================================
   Carrier Pages
   ======================================== */

.ct-carrier-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    font-family: inherit;
    color: #222;
}

/* Breadcrumbs */
.ct-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0 0 24px 0;
    font-size: 13px;
}

.ct-breadcrumbs li {
    color: #999;
}

.ct-breadcrumbs li::after {
    content: '/';
    margin-left: 6px;
    color: #ccc;
}

.ct-breadcrumbs li:last-child::after {
    display: none;
}

.ct-breadcrumbs a {
    color: #1e73be;
    text-decoration: none;
}

.ct-breadcrumbs a:hover {
    text-decoration: underline;
}

/* Carrier Header */
.ct-carrier-header {
    margin-bottom: 28px;
}

.ct-carrier-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.ct-carrier-subtitle {
    font-size: 16px;
    color: #575760;
    line-height: 1.6;
    margin: 0;
}

/* Tracking Section */
.ct-tracking-section {
    margin-bottom: 48px;
}

/* Section Headings */
.ct-how-to-track h2,
.ct-status-guide h2,
.ct-carrier-about h2,
.ct-faq h2,
.ct-related-carriers h2,
.ct-popular-carriers h2,
.ct-all-carriers h2 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px 0;
}

.ct-how-to-track > p,
.ct-status-guide > p,
.ct-carrier-about > p,
.ct-related-carriers > p,
.ct-popular-carriers > p,
.ct-all-carriers > p {
    font-size: 15px;
    color: #575760;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* How to Track Steps */
.ct-how-to-track {
    margin-bottom: 48px;
}

.ct-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 20px;
}

.ct-step-number {
    width: 34px;
    height: 34px;
    background: #1e73be;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.ct-step-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0 0 4px 0;
}

.ct-step-content p {
    font-size: 14px;
    color: #575760;
    margin: 0;
    line-height: 1.5;
}

/* Status Guide Grid */
.ct-status-guide {
    margin-bottom: 48px;
}

.ct-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.ct-status-item {
    border-radius: 6px;
    padding: 16px 18px;
    border-left: 4px solid;
}

.ct-status-item h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.ct-status-item p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    color: #555;
}

.ct-si-info { background: #fffbeb; border-left-color: #d97706; }
.ct-si-info h3 { color: #92400e; }

.ct-si-transit { background: #f0f6fc; border-left-color: #1e73be; }
.ct-si-transit h3 { color: #1e73be; }

.ct-si-delivery { background: #f0fdf4; border-left-color: #22c55e; }
.ct-si-delivery h3 { color: #15803d; }

.ct-si-delivered { background: #f0fdf4; border-left-color: #16a34a; }
.ct-si-delivered h3 { color: #166534; }

.ct-si-exception { background: #fef2f2; border-left-color: #ef4444; }
.ct-si-exception h3 { color: #b91c1c; }

.ct-si-expired { background: #f9fafb; border-left-color: #9ca3af; }
.ct-si-expired h3 { color: #4b5563; }

/* About */
.ct-carrier-about {
    margin-bottom: 48px;
}

.ct-carrier-about p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0 0 12px 0;
}

/* FAQ */
.ct-faq {
    margin-bottom: 48px;
}

.ct-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.ct-faq-item summary {
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    background: #fafafa;
    transition: background 0.15s;
}

.ct-faq-item summary:hover {
    background: #f0f6fc;
}

.ct-faq-item summary::-webkit-details-marker {
    display: none;
}

.ct-faq-item summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    color: #999;
    flex-shrink: 0;
    margin-left: 12px;
}

.ct-faq-item[open] summary::after {
    content: '\2212';
}

.ct-faq-item summary h3 {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0;
}

.ct-faq-answer {
    padding: 0 18px 16px;
}

.ct-faq-answer p {
    font-size: 14px;
    color: #575760;
    line-height: 1.6;
    margin: 0;
}

/* Related Carriers */
.ct-related-carriers {
    margin-bottom: 32px;
}

.ct-related-grid,
.ct-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.ct-related-link,
.ct-popular-link {
    display: block;
    padding: 12px 16px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.ct-related-link:hover,
.ct-popular-link:hover {
    border-color: #1e73be;
    background: #f0f6fc;
    color: #1e73be;
}

/* All Carriers Link */
.ct-all-carriers-link {
    text-align: center;
    margin-top: 24px;
}

.ct-all-carriers-link a {
    color: #1e73be;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.ct-all-carriers-link a:hover {
    text-decoration: underline;
}

/* ========================================
   Carrier Index Page
   ======================================== */

.ct-popular-carriers {
    margin-bottom: 48px;
}

.ct-all-carriers {
    margin-bottom: 48px;
}

.ct-carrier-search-filter {
    margin-bottom: 20px;
}

.ct-carrier-search-filter label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #575760;
    margin-bottom: 6px;
}

.ct-carrier-search-filter input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    outline: none;
    box-sizing: border-box;
}

.ct-carrier-search-filter input:focus {
    border-color: #1e73be;
    box-shadow: 0 0 0 2px rgba(30, 115, 190, 0.15);
}

.ct-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
}

.ct-alpha-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.ct-alpha-nav a:hover {
    background: #1e73be;
    color: #fff;
}

.ct-letter-group {
    margin-bottom: 24px;
}

.ct-letter-group h3 {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e0e0;
}

.ct-letter-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px;
}

.ct-letter-group li a {
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
}

.ct-letter-group li a:hover {
    background: #f0f6fc;
    color: #1e73be;
}

/* ========================================
   Mobile Responsive
   ======================================== */

@media (max-width: 640px) {
    .ct-form {
        padding: 20px;
    }

    .ct-tracking-row {
        flex-direction: column;
    }

    .ct-btn {
        width: 100%;
    }

    .ct-status-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ct-summary {
        grid-template-columns: 1fr 1fr;
    }

    .ct-carrier-header h1 {
        font-size: 22px;
    }

    .ct-status-grid {
        grid-template-columns: 1fr;
    }

    .ct-related-grid,
    .ct-popular-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ct-letter-group ul {
        grid-template-columns: 1fr 1fr;
    }
}