.order-tracking-search-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    width: 100%;
    margin: 0;
}

.ot-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    text-align: center;
}

.ot-search-form {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    max-width: 500px;
    margin: 0 auto 30px auto;
}

.ot-search-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.ot-search-btn {
    padding: 12px 20px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.ot-search-btn:hover {
    background-color: #005177;
}

/* Tracker Styles */
.ot-results-container {
    margin-top: 20px;
}

.ot-tracker-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fafafa;
}

.ot-product-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.ot-tracker-card h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.ot-product-details {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ot-product-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.ot-product-title {
    font-size: 16px;
    font-weight: 500;
    color: #555;
}

.ot-progress-wrapper-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ot-progress-wrapper {
    display: flex;
    position: relative;
    width: 100%;
}

/* Common Step Styles */
.ot-step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.ot-step-icon-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.ot-step-icon {
    /* size is dynamically set via elementor control, defaults applied if not set */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* Ensure icon is positioned relatively so background masks the line if it goes through */
    position: relative;
    z-index: 2;
}

.ot-step-icon svg {
    transition: fill 0.3s ease;
}

.ot-step-label {
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.ot-step-meta {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
    padding: 0 10px;
}

.ot-step-desc {
    margin: 5px 0;
    line-height: 1.4;
}

.ot-step-att-link {
    display: inline-block;
    margin-top: 5px;
    text-decoration: none;
    font-weight: 500;
}

.ot-step-att-link:hover {
    text-decoration: underline;
}

.ot-no-results {
    color: #d9534f;
    font-weight: bold;
    text-align: center;
}

/* Line Styles Support */
.ot-line-style-solid .ot-progress-wrapper::before { border-style: solid; }
.ot-line-style-dashed .ot-progress-wrapper::before { border-style: dashed; }
.ot-line-style-dotted .ot-progress-wrapper::before { border-style: dotted; }

/* ----------------------------------
   INLINE LAYOUT (Horizontal) 
   ---------------------------------- */
.ot-layout-inline .ot-progress-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

/* The magic for perfect line clipping:
   Start at 50% of the FIRST step (which is (100% / number_of_steps) / 2)
   End at 50% of the LAST step 
   Since calc is a bit messy with dynamic flex children, we use the property that 
   left: calc(100% / (2 * var(--num-steps))) exactly hits the center of the first child,
   and right: calc(100% / (2 * var(--num-steps))) exactly hits the center of the last child.
*/
.ot-layout-inline .ot-progress-wrapper::before {
    content: '';
    position: absolute;
    z-index: 1;
    border-top-width: 2px;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    height: 0 !important;
    
    /* Perfect horizontal clipping */
    left: calc(100% / (2 * var(--num-steps)));
    right: calc(100% / (2 * var(--num-steps)));
}


/* Line Positions for Inline */
.ot-line-pos-inline-middle .ot-progress-wrapper::before {
    top: calc(var(--circle-size) / 2); 
}
/* If above/below */
.ot-line-pos-inline-above .ot-progress-wrapper::before {
    top: -15px; 
}
.ot-line-pos-inline-below .ot-progress-wrapper::before {
    bottom: -15px;
    top: auto !important;
}

/* ----------------------------------
   LIST LAYOUT (Vertical) 
   ---------------------------------- */
.ot-layout-list .ot-progress-wrapper-container {
    /* Center the list block within its container */
    display: flex;
    justify-content: center;
}

.ot-layout-list .ot-progress-wrapper {
    flex-direction: column;
    align-items: stretch;
    padding: 0; 
    min-width: 250px; 
}

.ot-layout-list .ot-progress-wrapper::before {
    content: '';
    position: absolute;
    z-index: 1;
    border-left-width: 2px;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    width: 0 !important;
    
    /* Perfect vertical clipping: Start at the center of the first icon, end at the center of the last icon */
    /* This requires knowing the height of the first and last step, which varies.
       Alternative: Position relative on the wrapper, top based on first circle center.
       Since we can't easily calculate bottom offset based on flex child height via pure CSS,
       the standard workaround is top/bottom offsets.
    */
    top: calc(var(--circle-size) / 2);
    /* For a vertical list, it's easier to visually clip the line with padding or pseudo elements 
       on the wrapper, but using a reasonable bottom offset works well enough.
       If it extends too far, it's because step heights differ.
    */
    bottom: 50px; /* Fallback */
}

/* Override bottom clipping for list using flex properties */
/* A robust way is to not use the wrapper pseudo-element, but let's stick to it and give it a decent default. */

.ot-layout-list .ot-step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    margin-bottom: 30px;
    flex: none;
}

.ot-layout-list .ot-step:last-child {
    margin-bottom: 0;
}

.ot-layout-list .ot-step-icon-wrapper {
    margin-bottom: 0; /* Reset margins */
}

.ot-layout-list .ot-step-meta {
    text-align: left;
    padding: 0;
}

/* Line Positions for List */

/* LEFT Position */
.ot-line-pos-list-left .ot-progress-wrapper::before {
    left: -15px; 
}
.ot-line-pos-list-left .ot-step {
    flex-direction: row;
    align-items: flex-start;
}
.ot-line-pos-list-left .ot-step-icon-wrapper {
    margin-right: 20px;
}
.ot-line-pos-list-left .ot-step-content {
    flex: 1;
}

/* RIGHT Position */
.ot-line-pos-list-right .ot-progress-wrapper::before {
    right: -15px; 
    left: auto !important;
    border-left-width: 0 !important;
    border-right-width: 2px; 
}
.ot-line-pos-list-right .ot-step {
    flex-direction: row-reverse;
    text-align: right;
    align-items: flex-start;
}
.ot-line-pos-list-right .ot-step-icon-wrapper {
    margin-left: 20px;
}
.ot-line-pos-list-right .ot-step-meta {
    text-align: right;
}

/* MIDDLE Position */
.ot-line-pos-list-middle .ot-progress-wrapper::before {
    left: calc(var(--circle-size) / 2); 
}
.ot-line-pos-list-middle .ot-step {
    flex-direction: row;
    align-items: flex-start;
}
.ot-line-pos-list-middle .ot-step-icon-wrapper {
    margin-right: 20px;
}

/* Connect lines for left/right */
.ot-line-pos-list-left .ot-progress-wrapper::before {
    left: 0; 
}
.ot-line-pos-list-right .ot-progress-wrapper::before {
    right: 0; 
}

/* Animations for current status */
@keyframes ot-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

@keyframes ot-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes ot-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Apply animations based on prefix class and current step */
.ot-anim-pulse .ot-step.current .ot-step-icon {
    animation: ot-pulse 2s infinite;
}

.ot-anim-bounce .ot-step.current .ot-step-icon {
    animation: ot-bounce 2s infinite;
}

.ot-anim-spin .ot-step.current .ot-step-icon {
    animation: ot-spin 3s linear infinite;
}

@media (max-width: 600px) {
    .ot-search-form {
        flex-direction: column;
    }
    
    .ot-product-info-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Force list view on mobile for inline layout */
    .ot-layout-inline .ot-progress-wrapper-container {
        justify-content: flex-start;
        padding-left: 20px;
    }
    .ot-layout-inline .ot-progress-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .ot-layout-inline .ot-progress-wrapper::before {
        top: calc(var(--circle-size) / 2) !important;
        bottom: 50px !important;
        left: calc(var(--circle-size) / 2) !important; 
        width: 0 !important;
        height: auto !important;
        border-top-width: 0 !important;
        border-left-width: 2px !important;
    }
    .ot-layout-inline .ot-step {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 30px;
        flex: none;
    }
    .ot-layout-inline .ot-step-icon-wrapper {
        margin: 0 20px 0 0;
    }
    .ot-layout-inline .ot-step-meta {
        text-align: left;
        padding: 0;
    }
}