/* Kitgenix Order Tracking for WooCommerce – Frontend Styles
   Styles for the plugin's frontend interface, including the tracking form and results display.
   Built with a focus on usability and consistency with WordPress frontend design patterns, while maintaining a clean and modern look.
*/

/* Wrapper for the form area */
.kitgenix-tracking-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Spacing inside the form */
.kitgenix-tracking-form form p {
    margin-bottom: 12px;
}

/* Error message display */
.kitgenix-tracking-error {
    color: #b81c23;
}

/* Results wrapper */
.kitgenix-tracking-results {
    margin-top: 24px;
}

/* Tracking list reset */
.kitgenix-tracking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tracking list items */
.kitgenix-tracking-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

/* ===================== New consolidated styles (moved from inline) ===================== */
.kitgenix-tracking-wrapper {
    max-width: 880px;
    margin: 0 auto 40px;
    font-size: 14px;
}
.kitgenix-tracking-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 8px;
}
.kitgenix-tracking-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 20px;
}
.kitgenix-tracking-intro {
    margin-top: 0;
    margin-bottom: 16px;
    color: #555d66;
}
.kitgenix-tracking-form { /* keep wrapper spacing consistent */
    margin: 0;
}
.kitgenix-tracking-mode-switch {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.kitgenix-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #d5d8dc;
    cursor: pointer;
    background: #f6f7f7;
    font-weight: 500;
}
.kitgenix-mode-option input { margin: 0; }
.kitgenix-tracking-fields { margin-bottom: 16px; }
.kitgenix-field-group { margin-bottom: 12px; }
.kitgenix-field-group input[type="text"],
.kitgenix-field-group input[type="email"] {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #c3c4c7;
}
.kitgenix-label {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
}
.kitgenix-field-postcode .kitgenix-help {
    display: block;
    font-size: 12px;
    color: #6c737c;
    margin-top: 3px;
}
.kitgenix-actions { margin-top: 8px; }
.kitgenix-button-primary { padding-left: 20px; padding-right: 20px; }
.kitgenix-tracking-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    background: #fbeaea;
    color: #a42834;
}
.kitgenix-tracking-results { margin-top: 8px; }
.kitgenix-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 16px;
}
.kitgenix-card { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 6px; padding: 16px 18px; }
.kitgenix-mt-16 { margin-top: 16px; }
.kitgenix-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 16px; }
.kitgenix-order-meta, .kitgenix-order-status { margin: 4px 0; }
.kitgenix-order-status { font-weight: 600; }
.kitgenix-tracking-list { list-style: none; padding: 0; margin: 0; }
.kitgenix-tracking-item { padding: 10px 0; border-bottom: 1px solid #ececec; }
.kitgenix-tracking-item:last-child { border-bottom: none; }
.kitgenix-tracking-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kitgenix-carrier-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 20px; margin-right: 4px; }
.kitgenix-carrier-icon img { max-width: 100%; max-height: 100%; height: auto; width: auto; display: block; }
.kitgenix-carrier-name { font-weight: 600; }
.kitgenix-tracking-number { margin: 4px 0; }
.kitgenix-tracking-link { margin: 4px 0; }
.kitgenix-tracking-link-muted { color: #6c737c; font-style: italic; }
.kitgenix-tracking-no-shipments { margin: 0; }
.kitgenix-card-map iframe { border-radius: 4px; }
.kitgenix-map-message { margin-top: 6px; color: #6c737c; font-size: 12px; }
.kitgenix-map-note { margin-top: 4px; color: #6c737c; font-size: 12px; }
#kitgenix-order-map { width: 100%; height: 320px; border-radius: 4px; overflow: hidden; }
.kitgenix-card-details h4 { margin: 0 0 6px; font-size: 14px; }
.kitgenix-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kitgenix-details-address { margin: 0; color: #2c3338; }
.kitgenix-details-items { margin-top: 8px; }
.kitgenix-items-list { list-style: none; padding: 0; margin: 0; }
.kitgenix-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.kitgenix-item:last-child { border-bottom: none; }
.kitgenix-item-name { font-weight: 500; }
.kitgenix-item-qty { color: #6c737c; }
.kitgenix-item--order { align-items: center; }
.kitgenix-item-left { display: inline-flex; align-items: center; gap: 10px; }
.kitgenix-item-image img { width: 40px; height: 40px; border-radius: 3px; object-fit: cover; display: block; }
.kitgenix-item-stats { display: inline-flex; gap: 12px; color: #6c737c; }
.kitgenix-details-note { margin: 0; color: #6c737c; }
.kitgenix-tracking-powered { margin: 4px 0 12px; text-align: right; font-size: 11px; color: #6c737c; }
.kitgenix-tracking-powered a { color: inherit; text-decoration: none; font-weight: 600; }
.kitgenix-tracking-powered a:hover { text-decoration: underline; }
@media (max-width: 782px) {
  .kitgenix-results-grid { grid-template-columns: 1fr; }
  .kitgenix-details-grid { grid-template-columns: 1fr; }
}

/* ===================== My Account tracking panel ===================== */
.kitgenix-account-tracking {
    --kitgenix-ot-accent: #214BFF;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-top: 4px solid var(--kitgenix-ot-accent);
    border-radius: 6px;
    padding: 18px 20px;
    margin: 24px 0;
    font-size: 14px;
}
.kitgenix-account-tracking-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.kitgenix-account-tracking-title { margin: 0; font-size: 18px; }
.kitgenix-account-tracking-count { margin: 0 0 12px; color: #6c737c; }
.kitgenix-account-shipments { list-style: none; padding: 0; margin: 0; }
.kitgenix-account-shipment { padding: 14px 0; border-top: 1px solid #ececec; }
.kitgenix-account-shipment:first-child { border-top: none; padding-top: 4px; }
.kitgenix-account-shipment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.kitgenix-account-shipment-head .kitgenix-tracking-header { margin-bottom: 0; }
.kitgenix-account-label { font-weight: 500; margin-right: 4px; }
.kitgenix-account-tracking .kitgenix-tracking-number code { background: #f6f7f7; padding: 2px 6px; border-radius: 3px; word-break: break-all; }
.kitgenix-account-shipment-note { margin: 8px 0; padding: 8px 10px; background: #f6f7f7; border-radius: 4px; color: #2c3338; }
.kitgenix-account-tracking .kitgenix-shipment-items { margin-top: 8px; }
.kitgenix-account-shipment-actions { margin: 12px 0 0; }
.kitgenix-account-tracking .kitgenix-account-track-button {
    background: var(--kitgenix-ot-accent);
    border-color: var(--kitgenix-ot-accent);
    color: #ffffff;
    font-weight: 600;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.kitgenix-account-tracking .kitgenix-account-track-button::after {
    content: "\2197";
    margin-left: 6px;
    display: inline-block;
}
.kitgenix-account-tracking .kitgenix-account-track-button:hover,
.kitgenix-account-tracking .kitgenix-account-track-button:focus {
    filter: brightness(0.9);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Status badges */
.kitgenix-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    background: #eef0f2;
    color: #2c3338;
}
.kitgenix-status-badge--order { background: var(--kitgenix-ot-accent); color: #ffffff; }
.kitgenix-status-badge--shipped,
.kitgenix-status-badge--in_transit { background: #e8f0fe; color: #1a4fb4; }
.kitgenix-status-badge--delivered { background: #e6f4ea; color: #1e7b34; }
.kitgenix-status-badge--exception,
.kitgenix-status-badge--returned { background: #fff4e5; color: #8a5300; }
.kitgenix-status-badge--cancelled { background: #fbeaea; color: #a42834; }

/* Shipment timeline */
.kitgenix-timeline { list-style: none; display: flex; padding: 0; margin: 12px 0 8px; }
.kitgenix-timeline-step { position: relative; flex: 1 1 0; text-align: center; padding-top: 22px; font-size: 12px; color: #6c737c; }
.kitgenix-timeline-step::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #dcdcde;
}
.kitgenix-timeline-step:first-child::before { display: none; }
.kitgenix-timeline-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #dcdcde;
    box-sizing: border-box;
    z-index: 1;
}
.kitgenix-timeline-step.is-reached { color: #2c3338; }
.kitgenix-timeline-step.is-reached::before { background: var(--kitgenix-ot-accent, #214BFF); }
.kitgenix-timeline-step.is-reached .kitgenix-timeline-dot { background: var(--kitgenix-ot-accent, #214BFF); border-color: var(--kitgenix-ot-accent, #214BFF); }
.kitgenix-timeline-step.is-warning .kitgenix-timeline-dot { background: #dba617; border-color: #dba617; }
.kitgenix-timeline-label { display: block; font-weight: 600; }
.kitgenix-timeline-date { display: block; margin-top: 2px; }
.kitgenix-timeline-estimate { margin: 4px 0 0; color: #6c737c; font-size: 12px; }

/* "Still in progress" step: reads as live/active rather than a stalled,
   permanently-pending node, without implying any specific automated status. */
.kitgenix-timeline-step.is-current .kitgenix-timeline-label { color: var(--kitgenix-ot-accent, #214BFF); }
.kitgenix-timeline-step.is-current .kitgenix-timeline-dot { color: var(--kitgenix-ot-accent, #214BFF); overflow: visible; }
.kitgenix-timeline-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    animation: kitgenix-timeline-pulse 1.8s ease-out infinite;
}
@keyframes kitgenix-timeline-pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kitgenix-timeline-pulse { animation: none; opacity: 0.35; }
}
@media (max-width: 600px) {
  .kitgenix-timeline { flex-direction: column; gap: 10px; }
  .kitgenix-timeline-step { text-align: left; padding: 0 0 0 26px; }
  .kitgenix-timeline-step::before { top: -10px; left: 7px; width: 2px; height: 10px; }
  .kitgenix-timeline-dot { left: 0; margin-left: 0; }
}