/*
 * Frontend Styles for WO Shipping Container Tracking - v2 (JSON Spec)
 * Version: 1.1.0
 */

/* Main Container */
.button:focus {
    outline: none!important;
}
.wo-sct-container-tracking {
    font-family: 'Poppins', sans-serif;
}
.wo-sct-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.wo-sct-header h2 { margin: 0; font-size: 24px; }
.wo-sct-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.wo-sct-filters .wo-sct-filter-btn {
    background-color: #ffffff;
    border: 1px solid #D1D5DB;
    color: #4B5563;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 0; /* Override any potential inherited margin */
}
.wo-sct-filters .wo-sct-filter-btn:hover {
    background-color: #f9fafb;
}
.wo-sct-filters .wo-sct-filter-btn.active {
    background-color: #0F2E5D; color: white; border-color: #0F2E5D;
}

/* Shipment Grid */
.wo-sct-shipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

/* Shipment Card - Base */
.wo-sct-shipment-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s
ease;
    display: flex
;
    flex-direction: column;
}
.wo-sct-shipment-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px 6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
}
.card-main-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }

/* Card Header */
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.container-id { font-weight: 700; font-size: 1.125rem; color: #0F2E5D; } /* font-bold text-lg text-brand-blue */
.shipment-id-and-carrier-wrapper { flex-grow: 1; }
.carrier-info { font-size: 13px; color: #4B5563; margin: 0; } /* Darker gray, remove margin */
.carrier-info-line { display: flex; justify-content: space-between; align-items: center; }
.card-header-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; }
.share-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280; /* gray-500 */
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: bold;
    font-size: 14px;
}
.share-btn:hover {
    background-color: #F3F4F6; /* gray-100 */
    color: #111827; /* gray-900 */
}
.status-badge {
    border: none; cursor: pointer; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 500;
}
.status-upcoming { background-color: #DBEAFE; color: #1E40AF; } /* bg-blue-100 text-blue-800 */
.status-in-transit { background-color: #D1FAE5; color: #065F46; animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* bg-green-100 text-green-800 animate-pulse-slow */
.status-arrived { background-color: #E5E7EB; color: #374151; } /* bg-gray-200 text-gray-800 */
@keyframes pulse-slow { 50% { opacity: .7; } }

/* Card Details */
.card-details { flex-grow: 1; }
.card-line-item { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; color: #374151; } /* text-gray-700 */
.card-line-item .dashicons {
    color: #28a745;
}
.route { font-weight: 500; }
.route-arrow {
    color: #2f3a5f;
    margin: 0 5px;
}

/* Progress Bar */
.progress-bar-wrapper { margin: auto 0 16px 0; }
.progress-bar-track { width: 100%; background-color: #E5E7EB; border-radius: 9999px; height: 0.625rem; } /* w-full bg-gray-200 rounded-full h-2.5 */
.progress-bar-fill { background-color: #0F2E5D; height: 0.625rem; border-radius: 9999px; } /* bg-brand-blue h-2.5 rounded-full */
.progress-bar-labels { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 500; color: #6B7280; margin-top: 4px; } /* flex justify-between text-xs font-medium text-gray-500 */

/* Track Button */
.track-btn {
    width: 100%; margin-top: 8px; padding: 8px 16px; font-size: 0.875rem; font-weight: 600; color: white;
    background-color: #F97316; /* bg-brand-accent (assumed orange) */
    border: none; border-radius: 8px; cursor: pointer;
}
.track-btn:hover { opacity: 0.9; }
.track-btn:disabled { background-color: #9CA3AF; cursor: not-allowed; }

/* History Footer & Panel */
.card-footer {
    padding: 12px 20px; background-color: #F9FAFB; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-size: 0.875rem; font-weight: 600; color: #0F2E5D; border-top: 1px solid #E5E8EF;
}
.card-footer:hover { background-color: #F3F4F6; }
.history-panel { padding: 20px; background-color: #F9FAFB; display: none; } /* hidden by default, JS will toggle */
.tracking-history-details {
    max-height: 280px; /* Approx. 3 entries */
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

/* Timeline */
.timeline { position: relative; border-left: 2px solid #E5E7EB; margin-left: 8px; }
.timeline-entry {
    position: relative;
    margin-left: 20px;
    padding: 0px;
}
.timeline-dot {
    position: absolute; display: flex; /*align-items: center;*/ justify-content: center;
    width: 24px; height: 24px; background-color: #DBEAFE; border-radius: 9999px; left: -33px;
    border: 4px solid white;
}
.timeline-dot .dashicons { font-size: 14px; color: #0F2E5D; }
.timeline-title { font-size: 1rem; font-weight: 600; color: #111827; }
.timeline-time { font-size: 0.75rem; color: #6B7280; margin: 2px 0; }
.timeline-location { font-size: 0.875rem; color: #4B5563; }

/* Join Container & Booking Form */
.join-container-header {
    padding: 0; /* Remove padding to allow button to fill space */
}
.join-container-btn {
    width: 100%;
    padding: 12px 20px;
    background-color: #F97316; /* Use accent color from .track-btn */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: opacity 0.3s ease;
}
.join-container-btn:hover {
    opacity: 0.9;
}
.join-container-btn.request-sent {
    background-color: #03a84e;
    cursor: not-allowed;
    opacity: 1; /* Ensure it's not faded */
}

.booking-form-panel {
    padding: 20px;
    background-color: #F9FAFB; /* Same as history panel */
    border-top: 1px solid #E5E8EF;
}
.booking-form p {
    font-size: 14px;
    color: #4B5563;
    margin-top: 0;
    margin-bottom: 16px;
}
.booking-form .form-row {
    margin-bottom: 12px;
}
.booking-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    color: #374151;
}
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
}
.submit-booking-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background-color: #0F2E5D; /* Use brand blue */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.submit-booking-btn:hover {
    opacity: 0.9;
}
.booking-closed-footer {
    justify-content: center;
    color: #6B7280;
    font-style: italic;
}
.form-message {
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
    text-align: center;
}
.form-message.success {
    background-color: #D1FAE5; /* green-100 */
    color: #065F46; /* green-800 */
}
.form-message.error {
    background-color: #FEE2E2; /* red-100 */
    color: #991B1B; /* red-800 */
}