/* =======================================================================
   WCFM Shipment Tracking – Styles
   ======================================================================= */

/* -----------------------------------------------------------------------
   Vendor dashboard – tracking form wrapper
   ----------------------------------------------------------------------- */

.wcfm_st_tracking_wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 24px 28px;
    margin-top: 28px;
}

.wcfm_st_tracking_wrapper h2 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #557da1;
}

/* Currently saved tracking banner */
.wcfm_st_current_tracking {
    background: #eaf4fb;
    border-left: 4px solid #557da1;
    padding: 10px 14px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}

.wcfm_st_current_tracking a {
    color: #557da1;
    font-weight: 600;
}

/* Form fields */
.wcfm_st_form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.wcfm_st_field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wcfm_st_field label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.wcfm_st_field .required {
    color: #e2401c;
}

.wcfm_st_select,
.wcfm_st_input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background: #fafafa;
    transition: border-color 0.2s;
}

.wcfm_st_select:focus,
.wcfm_st_input:focus {
    outline: none;
    border-color: #557da1;
    background: #fff;
}

/* Save button */
.wcfm_st_actions {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px; /* align with inputs */
}

#wcfm_st_save_btn {
    background: #557da1;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

#wcfm_st_save_btn:hover {
    background: #3f5f84;
}

#wcfm_st_save_btn:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.wcfm_st_response {
    font-size: 13px;
    font-weight: 600;
}

.wcfm_st_response.success { color: #46b450; }
.wcfm_st_response.error   { color: #e2401c; }

/* Badge in order list */
.wcfm_st_badge {
    display: inline-block;
    background: #3aafa9;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 6px;
}

/* -----------------------------------------------------------------------
   Customer My Account – tracking table
   ----------------------------------------------------------------------- */

.wcfm_st_tracking_section {
    margin-top: 40px;
}

.wcfm_st_tracking_section .woocommerce-order-details__title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
}

.wcfm_st_tracking_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wcfm_st_tracking_table th {
    background: #f3f6f9;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #444;
}

.wcfm_st_tracking_table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #333;
    vertical-align: middle;
}

.wcfm_st_tracking_number {
    font-family: monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.wcfm_st_track_btn {
    background: #557da1 !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block;
    transition: background 0.2s;
}

.wcfm_st_track_btn:hover {
    background: #3f5f84 !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 600px) {
    .wcfm_st_form {
        flex-direction: column;
    }
    .wcfm_st_actions {
        padding-top: 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .wcfm_st_tracking_table th:last-child,
    .wcfm_st_tracking_table td:last-child {
        display: none;
    }
}